boxshadow单个属性,boxshadow的4个属性值

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属性

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

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

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

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

box-shadow属性四个值是什么?

1、offset-x

第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。

2、offset-y

第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。

3、blur

第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。

4、spread

第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。

设置水平垂直偏移得到阴影效果：

outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。

inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。

关于box属性的总结

① box-shadow:阴影 ?第一个值:水平阴影的位置 允许负值 ?必选? h-shadow? 向左为负值

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第二个值：垂直阴影的位置 允许负值 ?必选? v-shadow? 向上为负值

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第三个值：模糊距离 可选 blur?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第四个值：阴影的大小 可选 spread

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第五个值：阴影的颜色 color 可选

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 第六个值：inset?从外层的阴影（开始时）改变阴影内侧阴影 可选

box-shadow:? h-shadow v-shadow blur spread color ?inset;

有时候不用设置边框，可以用box-shadow:0 0 2px #222来代替

② ?box-sizing: content-box|border-box|inherit