1. 基本语法

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

阴影颜色（支持透明度，例如 rgba(0,0,0,0.5)）

inset

改为内阴影（默认外阴影）

2. 最常见示例

外阴影

.box {  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);}php57 Bytes© 菜鸟-创作你的创作
  • 10px → 向右偏移 10 像素
  • 10px → 向下偏移 10 像素
  • 20px → 模糊半径
  • rgba(0,0,0,0.3) → 半透明黑色

内阴影

.box {  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);}php57 Bytes© 菜鸟-创作你的创作
  • inset → 阴影在元素里面，类似“凹陷”效果

多重阴影

.box {  box-shadow:     0 0 10px red,     0 0 20px blue;}php61 Bytes© 菜鸟-创作你的创作
  • 多个阴影用 逗号 分隔
  • 可以叠加发光效果

3. 动画/悬停效果

.box {  transition: box-shadow 0.3s ease;}.box:hover {  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);}php104 Bytes© 菜鸟-创作你的创作
  • 鼠标悬停时阴影变大，常用于按钮、卡片的悬停效果

4. 常用效果配方

效果

代码

卡片浮起

box-shadow: 0 4px 20px rgba(0,0,0,0.1);

柔和发光

box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);

凹陷按钮

box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset -2px -2px 5px rgba(255,255,255,0.8);

霓虹灯

box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;

5. 兼容性

  • 现代浏览器都支持 box-shadow
  • IE9+ 才支持（IE8 及更早版本不行）
  • 不需要前缀（以前需要 -webkit-box-shadow）

box-shadow详解_php

 小技巧：

  • 阴影颜色尽量用 rgba 控制透明度，比纯黑柔和
  • 模糊半径和扩散半径配合使用，可以做出立体感
  • 多重阴影可以模拟发光、立体浮雕、内外层阴影等效果

https://www.52runoob.com/archives/5676