css3中定义了许多的新特性,极大的丰富了css的表现力。本片博文意在探讨其中的新特性box-shadow。
box-shadow语法如下
box-shadow: h-shadow v-shadow blur spread color inset;
利用box-shadow可以生成投影,增加立体感。但是巧用box-shadow的spread(扩张半径)属性也可以实现多重边框效果。
传统的多重边框可以通过元素的多层嵌套实现。对各嵌套元素分别设置边框,稍加调整就可实现多重边框效果,但该方法会导致元素嵌套关系混乱,增加许多无意义的标签。
使用box-shadow特性,将两个偏移量 h-shadow 、v-shadow设置为0,将模糊值blur也设置为0,此时增加扩张半径,就会使元素的投影变为实线边框。即
.moreborder
{
position: absolute;
top: %;
left: %;
width: em;
height: em;
border-radius: px;
background: #fff;
box-shadow: px #D73C51,
}
此时可以发现在元素外围生成了一圈边框。但如果想要生成多重边框,就需要了解box-shadow实际支持分隔语法,可以使用逗号来生成多重投影,同样利用这个特性,可以生成多重边框。即
.moreborder
{
position: absolute;
top: %;
left: %;
width: em;
height: em;
border-radius: px;
background: #fff;
box-shadow: px #D73C51,
px #FFCD47,
px px px rgba(,,,.);
}
这样就生成了两重边框,在为该元素增加阴影,使其看起来更加立体。同理可以设置三层,四层…
如需要边框生成在内圈,只需要在最后将默认的外部阴影改变为内部阴影inset
但是同时也应意识到该”边框”不是真正的边框,他只是元素的自身投影,使用firebug查看此元素,也可以看到border值为0,因此它不受很多属性的影响。但同时因为该边框为自身投影,因此当你改变元素本身形状,例如设置圆角border-radius时不会出现边框无法贴合元素的情况。