box-shadow 是 CSS3 中非常灵活的属性，用好它可以在纯 CSS 的情况下实现丰富的视觉效果。下面整理了几类常用技巧。

定向阴影

通过调整偏移量和扩散半径，可以控制阴影只出现在特定方向。

Top
Right
Bottom
Left
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.drop-shadow.top {
    box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.right {
    box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.bottom {
    box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}
.drop-shadow.left {
    box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}

关键点：使用负的 spread-radius（第四参数）抵消阴影在非目标方向上的扩散，配合偏移量实现单边阴影。

强调效果

通过无偏移的阴影和高扩散半径可模拟发光或边框效果。

Dark
Light
Inset
Border
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.emphasize-dark {
    box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
.emphasize-light {
    box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}
.emphasize-inset {
    box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}
.emphasize-border {
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}
  • Dark/Light：通过模糊半径+扩散半径组合制造光晕
  • Inset：利用 inset 关键字实现内阴影，模拟内凹效果
  • Border：spread-radius 等于 7px、无模糊时，inset 阴影看起来像一个内边框

渐变叠加

使用 background-image 的渐变配合透明度的 box-shadow，实现更为柔和的层次感。

Light Linear
Dark Linear
Light Radial
Dark Radial
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

.gradient-light-linear {
    background-image: linear-gradient(
        rgba(255,255,255,.5), rgba(255,255,255,0));
}
.gradient-dark-linear {
    background-image: linear-gradient(
        rgba(0,0,0,.25), rgba(0,0,0,0));
}
.gradient-light-radial {
    background-image: radial-gradient(
        center 0, circle farthest-corner,
        rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.gradient-dark-radial {
    background-image: radial-gradient(
        center 0, circle farthest-corner,
        rgba(0,0,0,0.15), rgba(0,0,0,0));
}

注意：这里已移除厂商前缀，现代浏览器均支持标准 linear-gradient / radial-gradient 写法。

圆角阴影

圆角与阴影配合使用，可获得更自然的卡片效果。

Light
Heavy
Full
Barrel
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.light-rounded {
    border-radius: 3px;
}
.heavy-rounded {
    border-radius: 8px;
}
.full-rounded {
    border-radius: 50%;
}
.barrel-rounded {
    border-radius: 20px/60px;
}

border-radius 支持使用 / 分别指定水平和垂直半径，barrel-rounded 展示了这种椭圆圆角的效果。

浮雕阴影

结合 inset 和常规阴影，可以模拟按钮或卡片的浮雕效果。

Light
Heavy
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.embossed-light {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.embossed-heavy {
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.3),
        inset 0 -2px 3px rgba(0,0,0,0.3),
        0 1px 1px rgba(255,255,255,0.9);
}

原理：通过 inset 高亮上边缘、暗化下边缘，配合外部投影，模拟出凸起或凹陷的立体感。

参考