当先锋百科网

首页 1 2 3 4 5 6 7

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时不会出现边框无法贴合元素的情况。