关于css3中box-shadow的研究

最近做的项目是在公众号中开发类App的页面,用到了许多App中的设计元素,一个让我惊艳的css3属性:box-shadow出现在我的眼前,它可以非常方便的设置阴影,让网页中的元素变得立体感十足,非常美观,于是对此属性进行一番深入研究。

兼容性

兼容性对于前端来说是老生常谈却又不可忽视的一个重要属性,就算一个属性功能再强大,如果兼容性无法满足需求,再去写很多的hack,反而得不偿失了。
查询结果如下图所示(点击查看大图):

除去可怜的IE8和operaMini以外的其他现代浏览器基本全部都支持了这一属性。
那还等什么?大胆的用吧!

用法

工欲善其事,必先利其器。先别急着用到项目中,先来研究一下这个属性的各种属性和示例,之后用起来也就会更加的得心应手。
首先是box-shadow的css语法格式:

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

tips:向边框添加一个或多个阴影,该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。

这个属性是与border有关的,针对的是盒模型的边框。

属性值详解

h-shadow,v-shadow

这两个属性是必需的,省略长度的值是0。用来设置阴影偏移量,即以盒模型的左上角为原点,分别以上边框向右和左边框向下为x和y轴的正方向。允许负值。

blur

属性可选。指定模糊半径,半径越大模糊效果越明显。此属性不允许负值,但可以为0,此时阴影无模糊效果。

spread

属性可选。指定阴影拓展的尺寸,该值可为0,此时不拓展,为正时向外拓展,为负时像内拓展。

color

属性可选。指定阴影颜色。

inset

属性可选。默认值为外阴影,设定为inset后,阴影变为盒子内。

demo

光说不练假把式,是骡子是马demo出来遛遛。

1
2
3
4
// 盒子统一样式设置
width:200px;
height:50px;
border:10px solid #00f;
box-shadow:10px 10px #000 只偏移没有模糊效果
box-shadow:-10px 10px #000 水平偏移为负
box-shadow:10px 10px 5px #000 模糊半径为5px
box-shadow:10px 10px 0 10px #000 向外拓展10px
box-shadow:10px 10px 0 -10px #000 向内收缩10px
box-shadow:10px 10px 5px #000 inset 阴影变为内阴影
box-shadow:10px 10px 5px #000,-10px -20px 5px #000; 设置两个阴影
box-shadow:0 0 10px 10px #000 无偏移时可设置四周阴影

结语

一层层的把box-shadow属性剥开来看,理解加深了不少,也深深感到css的强大。

Keep moving forward!Learn and write more.

参考资料

CSS3 box-shadow 属性
css3:box-shadow边框阴影属性值详解