CSS3阴影 box-shadow的使用和技巧总结
原创
CSS3阴影 box-shadow的使用和技巧总结
原创
用户3672714
发布于 2025-08-19 15:27:16
发布于 2025-08-19 15:27:16
代码可运行
运行总次数：0
代码可运行
🎨 CSS3 阴影属性 box-shadow 使用与技巧
一、基本语法
box-shadow: offset-x offset-y blur-radius spread-radius color inset;php68 Bytes© 菜鸟-创作你的创作参数 | 含义 |
|---|---|
offset-x | 阴影水平偏移（必填，负值向左） |
offset-y | 阴影垂直偏移（必填，负值向上） |
blur-radius | 模糊半径（可选，默认 0） |
spread-radius | 阴影扩展半径（可选，默认 0） |
color | 阴影颜色（可选，默认元素文本颜色） |
inset | 内阴影，可选，默认为外阴影 |
示例：
div { width: 200px; height: 100px; background: #f0f0f0; box-shadow: 5px 5px 10px rgba(0,0,0,0.3);}php115 Bytes© 菜鸟-创作你的创作二、常用阴影类型
1. 外阴影（默认）
- 阴影出现在元素外部
box-shadow: 5px 5px 15px rgba(0,0,0,0.5);php41 Bytes© 菜鸟-创作你的创作2. 内阴影（inset）
- 阴影出现在元素内部，制造凹陷效果
box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);php44 Bytes© 菜鸟-创作你的创作3. 多重阴影
- 用逗号分隔，可以叠加多个阴影效果
box-shadow: 2px 2px 5px rgba(0,0,0,0.3), 0 0 10px rgba(255,0,0,0.5);php80 Bytes© 菜鸟-创作你的创作三、常用技巧
1. 模拟发光效果
box-shadow: 0 0 10px rgba(255,255,0,0.8);php41 Bytes© 菜鸟-创作你的创作- 常用于按钮、提示框发光效果
2. 阴影渐变
- 结合透明度和模糊半径实现柔和阴影
box-shadow: 0 4px 20px rgba(0,0,0,0.2);php39 Bytes© 菜鸟-创作你的创作3. 按钮点击凹陷效果
button { box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);}button:active { box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);}php126 Bytes© 菜鸟-创作你的创作4. 卡片悬浮效果
.card { box-shadow: 0 8px 20px rgba(0,0,0,0.15); transition: box-shadow 0.3s ease;}.card:hover { box-shadow: 0 12px 25px rgba(0,0,0,0.2);}php153 Bytes© 菜鸟-创作你的创作5. 内外阴影结合
div { box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 2px 5px rgba(0,0,0,0.2);}php100 Bytes© 菜鸟-创作你的创作- 可实现立体边框或凹凸效果
四、性能优化建议
- 阴影数量不要过多，尤其在移动端。
- 尽量使用
rgba而不是opacity叠加多个阴影，减少重绘。 - 配合
transform: translateZ(0)可启用 GPU 加速，提高动画流畅度。
💡 总结
box-shadow是 CSS3 强大的视觉效果工具- 支持外阴影、内阴影、多重阴影和动画变化
- 熟练掌握偏移、模糊、扩展、颜色组合，可打造按钮、卡片、浮动效果、发光提示等多种 UI 风格https://www.52runoob.com/archives/5957
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
