CSS3中的box-shadow属性可以轻松实现阴影的添加。box-shadow属性可以为元素添加内、外阴影或者同时添加内外阴影。其语法如下：
其中，各参数的含义如下：
- h-shadow：必须指定，表示阴影的水平偏移量。可正可负，正值表示右侧阴影，负值表示左侧阴影。
- v-shadow：必须指定，表示阴影的垂直偏移量。可正可负，正值表示下方阴影，负值表示上方阴影。
- blur：可选，表示阴影的模糊半径(模糊值越大，越模糊)。
- spread：可选，表示阴影的扩展半径(正值表示阴影扩大，负值表示阴影缩小)。
- color：可选，表示阴影的颜色。默认为黑色。
- inset：可选，表示添加内阴影，如果没有这个参数，则表示添加外阴影。
例如，以下代码可为元素添加一个黑色、4px的外阴影，水平偏移量为0，垂直偏移量为2px，模糊半径为2px，扩展半径为0：
.box {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.4);
}
如果需要添加内阴影，则在属性值后面加上inset参数即可，例如：
.box {
box-shadow: inset 0 0 10px #333;
}
注意，box-shadow属性不支持IE8及以下版本的浏览器，需要考虑兼容性问题。
京公网安备 11010802030320号