学科分类
目录
HTML5+CSS3

阴影

在网页制作中,经常需要对盒子添加阴影效果。使用CSS3中的box-shadow属性可以轻松实现阴影的添加,其基本语法格式如下。

box-shadow: h-shadow v-shadow blur spread color outset;

在上面的语法格式中,box-shadow属性共包含6个参数值,如表1所示。

表1 box-shadow属性参数值

参数值 描述
h-shadow 表示水平阴影的位置,可以为负值(必选属性)
v-shadow 表示垂直阴影的位置,可以为负值(必选属性)
blur 阴影模糊半径(可选属性)
spread 阴影扩展半径,不能为负值(可选属性)
color 阴影颜色(可选属性)
outset/ inset 默认为外阴影/内阴影(可选属性)

表1列举了box-shadow属性参数值,其中“h-shadow”和“v-shadow”为必选参数值不可以省略,其余为可选参数值。其中,“阴影类型”默认“outset”更改为“inset”后,阴影类型则变为内阴影。示例代码如下:

 1 <title>box-shadow属性</title>

 2 <style type="text/css">

 3 img{

 4   padding:20px;      /*内边距20px*/

 5   border-radius:50%;   /*将图像设置为圆形效果*/

 6   border:1px solid #666;

 7   box-shadow:5px 5px 10px 2px #999 inset;

 8 }

 9 </style>

第7行代码给图像添加了内阴影样式。需要注意的是,使用内阴影时须配合内边距属性padding,让图像和阴影之间拉开一定的距离,不然图片会将内阴影遮挡。运行示例代码效果如图1所示。

img

图1 box-shadow属性的使用

值得一提的是,同text-shadow属性(文字阴影属性)一样,box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果,示例代码如下。

box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #73AFEC inset;

示例代码对应效果如图2所示。

img

图2 多重内阴影的使用

点击此处
隐藏目录