CSS3 阴影
沸点数：21
作者：madama
生成时间：2025-04-23 16:48:46
来源：https://html.ciilii.com/
参考资料
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+
AIGEO优化摘要
AI可读摘要：CSS3 阴影介绍CSS3 阴影效果允许为元素添加阴影，包括文本阴影(text-shadow)和盒子阴影(box-shadow)。属性1. text-shadow为文本添加阴影效果语法：参数：h-shadow：水平阴影位置（必需）v-shadow：垂直阴影位置（必需）blur-radius：模糊距离（可选）color：阴影颜色（可选）2. box-shado...
常见问题：
CSS3 阴影主要讲了什么？
CSS3 阴影介绍CSS3 阴影效果允许为元素添加阴影，包括文本阴影(text-shadow)和盒子阴影(box-shadow)。属性1. text-shadow为文本添加阴影效果语法：参数：h-shadow：水平阴影位置（必需）v-shadow：垂直阴影位置（必需）blur-radius：模糊距离（可选）color：阴影颜色（可选）2. box-shado...
CSS3 阴影适合哪些人参考？
适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。
阅读CSS3 阴影时应重点看哪些内容？
建议重点关注标题、摘要、正文说明、图片资料和更新时间。
AIGEO评分：80/100
- 标题建议保持在8-60个字。
作者：王壹杰
时间：2025-04-23 16:48:46
来源：https://html.ciilii.com/
时间：2025-04-23 16:48:46
来源：https://html.ciilii.com/
