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揭秘》
最近写一个四周加阴影的项目用到了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属性可以设置一个或多个下拉阴影的框。
兼容性: