盒子阴影 box-shadow

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>盒子阴影</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 200px auto;
            /*opacity: 0;*/
            transition: .3s;
        }

        .box {
            /*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/
            /*box-shadow: -300px 0 10px 0 red, 300px 0 10px 0 blue;*/
        }
        .box:hover {
            margin-top: 195px;
            box-shadow: 0 5px 10px 0 #333;
        }

    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

原文地址：https://www.cnblogs.com/zhoajiahao/p/11294417.html

时间： 2024-10-05 03:30:45

盒子阴影 box-shadow的相关文章

·DIV 行内关联 box-shadow对象盒子阴影以及图片阴影

盒子阴影样式单词:box-shadow 语法 <style> div{box-shadow:0 0 1px #000 inset;} </style> 其中,第一个和第二个0分别代表边框间距靠左和靠上:1px表示阴影范围:#000表示阴影颜色为黑色:inset 代表框内阴影 ,没有inset 则代表框外阴影. 需要注意的是: box-shadow:0px 0px 1px #000当第1个值为0时,代表左右边框阴影为1px范围第1个值为正整数代表左边框阴影第1个值为负整数代表

字体图标盒子阴影

字体图标 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体图标</title>  <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel=&

css.盒子阴影

div{ width:100px; height:100px; font-size:212px; background-color:red; border-radius: 15px 24px 33px 42px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ } <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-

OpenGL 阴影之Shadow Mapping和Shadow Volumes

先说下开发环境.VS2013,C++空项目,引用glut,glew.glut包含基本窗口操作,免去我们自己新建win32窗口一些操作.glew使我们能使用最新opengl的API,因winodw本身只包含opengl 1.1版本的API,根本是不能用的. 其中矩阵计算采用gitHub项目openvr中的三份文件, Vectors.h ,Matrices.h, Matrices.cpp,分别是矢量与点类,矩阵类,我们需要的一些操作,矢量的叉乘和点乘,矩阵转置,矩阵的逆,矩阵与矢量相剩等. 这里主要

盒子模型(Box Model)

盒子模型(Box Model) ■ 盒子模型--概念在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属性. 细节说明: ?html 元素都可以看成一个盒子 ?盒子模型的参照物不一样,则使用的 css 属性不一样.比如:从 div1 的角度看,是 margin-right,从 div2 看,则是 margin-left. ?如果你不希望破坏外观,则尽量使用 margin 布局,因为 padding 可

CSS3 --添加阴影（盒子阴影、文本阴影的使用）

CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种阴影的使用: 1,盒子阴影(1)盒子阴影的属性是 box-shadow1box-shadow:5px 5px 10px gray;前两个值分别表示阴影水平方向和垂直方向的偏移量.第三个值表示模糊距离.最后一个值是阴影颜色. (2)盒子阴影是可以随着盒子形状而自动变化的原文:CSS3 - 给div或者文

探索盒子阴影box-shadow

盒子阴影之探索盒子阴影:box-shadow 作用:在盒子不同的方位添加你想要的阴影效果. box-shadow有六个参数值,下面一一举例说明语法: Box-shadow: offset-x | offset-y | blur | sperd | color| position | 注意!!!以上也是box-shadow默认的排序! 第一:offset-x 阴影的水平偏移量,即X轴上阴影的位置,正值出现在元素的右侧负值在左侧. 当为正值代码: div { width: 200px; heig

css背景图片、圆角、盒子阴影、浮动

一.css背景图片 1.概述背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb(0, 0, 255); background-color: #0000ff; background-color 也可被设置为透明(transparent),这会使得其下的元素可见. 3.背景图(background-image) background-image 属性允许指定一个图片展示在背景中.

纯代码利用CSS3 圆角边框和盒子阴影制作 iphone 手机效果

大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事情,很多代码都能实现. 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影,同时附上一个iphone 手机效果,提供大家练习. 1.border-radius 圆角矩形语法格式: border-radius: 水平半径/垂直半径只不过我们平时都把后面的这个垂直半径给省略了. 圆角也有连写的方法 border-radius: 左上角右上角右下角左下角;