🎨 CSS3 阴影属性box-shadow使用与技巧

🎨 CSS3 阴影属性 box-shadow 使用与技巧一、基本语法代码语言：javascript复制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

内阴影，可选，默认为外阴影

示例：

代码语言：javascript复制div { width: 200px; height: 100px; background: #f0f0f0; box-shadow: 5px 5px 10px rgba(0,0,0,0.3);}php115 Bytes© 菜鸟-创作你的创作二、常用阴影类型1. 外阴影（默认）阴影出现在元素外部代码语言：javascript复制box-shadow: 5px 5px 15px rgba(0,0,0,0.5);php41 Bytes© 菜鸟-创作你的创作2. 内阴影（inset）阴影出现在元素内部，制造凹陷效果代码语言：javascript复制box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);php44 Bytes© 菜鸟-创作你的创作3. 多重阴影用逗号分隔，可以叠加多个阴影效果代码语言：javascript复制box-shadow: 2px 2px 5px rgba(0,0,0,0.3), 0 0 10px rgba(255,0,0,0.5);php80 Bytes© 菜鸟-创作你的创作三、常用技巧1. 模拟发光效果代码语言：javascript复制box-shadow: 0 0 10px rgba(255,255,0,0.8);php41 Bytes© 菜鸟-创作你的创作常用于按钮、提示框发光效果2. 阴影渐变结合透明度和模糊半径实现柔和阴影代码语言：javascript复制box-shadow: 0 4px 20px rgba(0,0,0,0.2);php39 Bytes© 菜鸟-创作你的创作3. 按钮点击凹陷效果代码语言：javascript复制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. 卡片悬浮效果代码语言：javascript复制.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. 内外阴影结合代码语言：javascript复制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