首页 > 编程笔记

CSS box-shadow属性的用法

在 CSS3 里，可以借助 box-shadow 属性给各种元素添加阴影，和我们在一些图像处理软件中制作阴影效果时用到的属性很相似。

语法如下：

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

以上各属性值的含义如下：

h-shadow（水平）：指定阴影的水平偏移量，为正值（如 5px）时阴影向右，而为负值（如 -10px）时阴影向左；
v-shadow（垂直）：指定阴影的竖直偏移量，正值（如 5px）会使阴影在框的底部，而负值（即 -10px）会使它偏向上；
blur（模糊）：设置阴影的柔化半径，默认值为 0，意味着没有模糊效果；
spread：阴影的扩展尺寸，0px 代表阴影和当前的实体一样大，大于 0 则表示阴影的大小比默认值增加相应的量，负值表示缩小相应的量；
color（颜色）：颜色值，用于设置阴影颜色；
outset/inset：选择是外部阴影（outset）还是内部阴影（inset）。

除了前两个是必选属性值外，其他都是可选属性值。例如下面的代码实现了给一个 div 块设置阴影的效果：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#shadow {
    box-shadow: 10px 10px 12px #888; /*向右10px，向下10px，柔化12px，颜色#888*/
    width:500px;
    height:100px;
    line-height:100px;
    padding:5px;
    text-align:center;
    font-size:20px;
    background:#21759b;
    margin:20px;
    color:#ffffff;
}
</style>
</head>
<body>
<div id="shadow">给一个div块添加阴影</div>
</body>
</html>

效果如下图所示：

图 1 阴影效果

CSS box-shadow属性的用法

推荐阅读