CSS3 阴影
2025-04-23
26
参考资料
CSS3 阴影
CSS3 阴影
介绍
CSS3 阴影效果允许为元素添加阴影，包括文本阴影(text-shadow)和盒子阴影(box-shadow)。
属性
1. text-shadow
为文本添加阴影效果
语法：
text-shadow: h-shadow v-shadow blur-radius color;
参数：
h-shadow：水平阴影位置（必需）
v-shadow：垂直阴影位置（必需）
blur-radius：模糊距离（可选）
color：阴影颜色（可选）
2. box-shadow
为元素盒子添加阴影效果
语法：
box-shadow: h-shadow v-shadow blur-radius spread-radius color inset;
参数：
h-shadow：水平阴影位置（必需）
v-shadow：垂直阴影位置（必需）
blur-radius：模糊距离（可选）
spread-radius：阴影尺寸（可选）
color：阴影颜色（可选）
inset：将外部阴影改为内部阴影（可选）
用法示例
text-shadow 示例
/* 简单阴影 */
h1 {
text-shadow: 2px 2px #ff0000;
}
/* 模糊阴影 */
h2 {
text-shadow: 2px 2px 5px #000000;
}
/* 多重阴影 */
h3 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}box-shadow 示例
/* 简单阴影 */
div {
box-shadow: 10px 10px;
}
/* 模糊阴影 */
div {
box-shadow: 10px 10px 5px #888888;
}
/* 扩展阴影 */
div {
box-shadow: 10px 10px 5px 5px #888888;
}
/* 内阴影 */
div {
box-shadow: inset 5px 5px 10px #888888;
}
/* 多重阴影 */
div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}浏览器支持
所有现代浏览器都支持 CSS3 阴影属性：
Chrome 4.0+
Firefox 3.5+
Safari 4.0+
Opera 10.5+
IE 9.0+
