IT兄弟连 HTML5教程 CSS3属性特效 盒模型阴影

5f16a58a57bc47108e1c532aebeafd05.jpg

 

除了为文字添加阴影,我们还可以为盒模型添加阴影。盒模型阴影的属性名称为box-shadow,此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个则是阴影的颜色。前Chrome 16+,FireFox8+,Opera11.6+,Safari5.1+以及IE9+均可直接使用box-shadow,而不需要-webkit-诸如此类的前缀。

语法格式如下所示:

box-shadow:[inset] x y blur [spread] color

box-shadow的参数说明如表1所示。

表1  box-shadow参数说明

 

dec96fb0f8e242b391ad5f3e6ed0e9fb.png

 

与文字阴影text-shaow的参数意义一致,横向偏移量和纵向偏移量可以为负值,代表盒模型阴影向左偏移或向上偏移。盒模型阴影也是可以叠加的。添加多层阴影用“,”隔开。阴影叠加是先渲染后面的再渲染前面的。

 

1.最简单的用法

box-shadow:2px 2px 20px #000;

此语法说明为一段文字设定横向偏移量为2px,纵向偏移量为2px,模糊距离为20px的黑色阴影。以下是一个单层阴影的例子。代码如下:

91c276263b9c4fccb06859f9041a078f.png

 

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,我么可以看到box的外面增加了一层黑色的阴影,如图1所示。

616f450e2a074c6784ed9e8cf7553f02.jpg

图1  盒模型阴影

 

2.盒模型阴影投影方式

box-shadow: inset 2px 2px 20px #000;

此语法说明为盒模型嵌套一层内投影。横向偏移量为2px,纵向偏移量为2px,模糊距离为20px的黑色内投影。代码如下:

64b07ef290364b6cbc435753c47e8980.png

 

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,盒模型被加上了内投影,如图2所示:

42896327db17463bae69879289636ff1.jpg

图2  盒模型内投影

 

3.盒模型阴影叠加

box-shadow: 2px 2px 20px green,inset 2px 2px 20px blue;

此语法说明为盒模型设定双层阴影。第一层为横向偏移量为2px,纵向偏移量为2px,模糊距离为20的向外的绿色阴影,第二层为横向偏移量为2px,纵向偏移量为2px,模糊距离为20px的蓝色内投影。代码如下:

865fe9310bc946dd9a86f3ed40d445d4.png

 

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,box被加上了两层阴影,其中有一层是内投影,如图3所示。

33b9a420e35c498cbc512011883eee31.jpg

图3  盒模型阴影叠加

posted on 2019-11-18 08:47  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航