boxshadow怎么设置,boxshadow值的意义

CSS3属性box-shadow的使用

最近写一个四周加阴影的项目用到了box-shadow属性，感觉项目里面好多地方都会用到这个属性，于是就专门整理了一下。

语法：

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

为了更清楚的了解box-shadow，做几个demo来给大家演示一下效果：

h-shadow代表的是阴影的水平位置偏移量，可以是正负值

即在x轴的阴影位置，正值阴影出现在右边，负值阴影出现在左边

v-shadow代表垂直阴影位置，即在y轴的阴影位置，可以是正负值

当v-shadow的正值时阴影出现在下面，当v-shadow的负值时阴影出现在上面

blur阴影的模糊距离，这使得阴影部分的过渡看起来更加柔和

spread代表阴影的大小，也是最后一个长度值代表阴影的尺寸。到这里大家心中是不是对blur和spread 产生疑问，其实blur是用于描述模糊半径，它的取值决定了阴影的模糊程度；而spread表示阴影所占区域的大小。

color阴影的颜色值，可以用任何颜色单位的来表示。当我们没有设置颜色值，默认是黑色

默认情况下，设置的阴影都是外部阴影，inset的作用是将外部阴影转换成内部阴影

附：

属性定义及使用说明：

box-shadow属性可以设置一个或多个下拉阴影的框。

兼容性：

关于CSS中box-shadow的简单使用

box-shadow就是给盒子、文本的阴影，就像人的影子一样。根据调整其属性进行控制阴影出现的位置，大小，颜色。

box-shadow属性添加一个或者多个阴影。

语法：

CSS之box-shadow属性

CSS box-shadow 属性用于在元素的框架上添加阴影效果。

当给出两个、三个或四个 length 值时：

你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。 阴影绘制由最后一个开始 ， 故第一个设置的阴影将覆盖在后设置的阴影之上。

利用此特性可以给上下左右边框设置不同样式的阴影效果：

如何在HTML中添加阴影效果

在我们浏览网页的时候会发现有的网页在你鼠标划过的时候边缘会出现一层阴影效果，就比如

然后在样式中添加box-shadow，因为是鼠标滑到图片上面才显示阴影，所以我们要设置滑动，在滑动里面添加box-shadow，这里我是设了双层的阴影，就是给了双份的box-shadow，中间用逗号隔开，第一层控制图片外围的一圈白边，第二层控制阴影

当鼠标没有滑过图片时

当鼠标滑过图片时

box-shadow：后面有5个数值

第1个长度值?来设置对象的阴影?平偏移值。?平偏移量正值向， 右负值向左；

第2个长度值?来设置对象的阴影垂直偏移值。垂直偏移量正值向 ，下负值向上；

第3个长度值则?来设置对象的阴影模糊值。模糊度不能为负值；

第4个长度值则?来设置对象的阴影外延值。不允许负值

第5个是设置对象的阴影的颜?

是不是很神奇

我学识有限，若有错误，还望及时指出，以免误导他人，谢谢！！！

CSS3 利用“box-shadow”属性结合“outline”制作“边框内圆角”

box-shadow：给元素块添加周边阴影效果。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

*还有另一种情况： box-shadow: 0 2px 2px #FECC84

当我们在色值前只写了三个数值的情况下，则第三个值是 blur （模糊距离）。

利用阴影属性，也可以实现外边框的效果：

当我们再为它添加一个 outline （轮廓），就会发现它实现了-边框内圆角：

* 关于为什么会这样：

outline的描边并不会跟着圆角走，因此显示为直角。

所以把这两者叠加到一起，box-shadow 则刚好填补描边与容器圆角之间的空隙。

*值得注意的是，box-shadow 阴影的大小值并不一定等于描边的宽度，它和圆角的大小有关系。所以只需要一个足够填补空隙的大小就可以了。事实上，制定一个等于描边宽度的值在某些浏览器中可能会渲染异常，所以，最好是稍小的值。

参考书籍： Lea Verou 《CSS揭秘》