编程语言研究书库
CSS 参考指南

圆角、阴影与滤镜 — 立体感的来源与代价

圆角、阴影与滤镜 — 立体感的来源与代价

这一章讲「让平面变立体」的三件工具: 圆角(收边)、阴影(层次)、滤镜(后期处理)。 它们都是锦上添花型属性——单个看都简单,真正的学问在两个地方: 阴影参数各管什么、以及哪些效果烧性能。

1. 这一章在全书链条里的位置

颜色与背景(第 09 章)铺好了「皮」,这一章加「浮雕」——卡片为什么像浮在页面上、 头像为什么是圆的、毛玻璃为什么毛,全在这里。动效章(第 11 章)会拿阴影做悬停反馈, 所以本章也是下一章的素材库。

2. 顶层全景:三个属性,三种「加工工序」

border-radius   盒子成形时:角上圆多少
box-shadow      盒子画完后:外面垫一层影子
text-shadow     字画完后:字后面垫影子
filter          整幅画完:整元素过一遍滤镜(后期处理,像修图软件的调整层)

图说:四个属性作用在渲染的不同工序上——先形、后影、再滤镜。

3. 核心原理:border-radius,从圆角到圆

.rounded-card { border-radius: 12px; }        /* 温和的圆角卡片 */
.circle-avatar {
  width: 100px; height: 100px;
  border-radius: 50%;                          /* 正方形 + 50% = 正圆 */
}

半径(radius)是角的弯曲程度:12px 是「现代卡片」的标准圆角; 50% 把每个角弯到最大——在正方形上,四个角正好弯成一个正圆,圆形头像就这么一行1。 注意前提是「正方」:长方形设 50% 出来的是椭圆。圆角不只是装饰——上一章见过, 圆角容器要配 overflow: hidden 裁齐角上溢出的内容(第 05 章模式)。

4. 核心原理:box-shadow 的五个参数

语法:box-shadow: [水平偏移] [垂直偏移] [模糊] [扩张] [颜色] [inset];2

主线例子:一行影子,逐个参数拆解

.card { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
参数值效果
水平偏移0影子不左右偏(正右负左)
垂直偏移4px影子向下 4px——像光从上方来
模糊10px边缘晕开 10px,越大越柔
扩张(省略)不整体缩放,可省略
颜色rgba(0,0,0,0.2)两成黑,不是纯黑

为什么颜色用 rgba 而不是 #000?书里把「纯黑硬影」列为常见错误: rgba(0, 0, 0, 0.2) 这种半透明黑才像自然光下的影子,纯黑像贴上去的纸3。 第六个参数 inset 把影子从「盒子外」翻进「盒子内」——内阴影,按下去的效果。

多层影子用逗号叠加,书里的「标准卡片悬浮」就是这个玩法4:

.card {
  box-shadow:
    0 2px 5px  rgba(0,0,0,0.1),   /* 近处一道浅影:贴地感 */
    0 10px 20px rgba(0,0,0,0.05);  /* 远处一道更淡更弥散的影:浮起感 */
}

两道影子一近一远、一浓一淡,模仿的是真实物体离地时的双层投影—— 单层影子给「贴着」,双层给「浮着」。

text-shadow 是同族小弟,只管字,且没有扩张和 inset 两个参数: text-shadow: 2px 2px 4px rgba(0,0,0,0.5);——标题压影、文字描光都靠它5。

5. 核心原理:filter——渲染之后的后期处理

filter 的思路和修图软件的「调整层」一样:元素画完了,整幅过一道滤镜再端出来6。 常用函数:

函数作用例
blur(px)模糊blur(5px)
grayscale(%)黑白化grayscale(100%) 全灰
brightness(%)明暗brightness(50%) 压暗一半
drop-shadow()跟轮廓的影子见下

两个值得单独说的:

drop-shadow 与 box-shadow 的分工。 box-shadow 的影子永远跟着矩形边框走; drop-shadow 的影子跟着内容的轮廓走。透明 PNG(比如一张抠好的人物图)要投影, 用 box-shadow 出来的是一个方框影,用 filter: drop-shadow(...) 影子才贴着人7。

backdrop-filter:模糊「身后」而不是「自己」。 毛玻璃面板三件套:

.glass-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);   /* 模糊这个元素背后的内容 */
  border-radius: 15px;
}

backdrop-filter 处理的是元素背后的画面——面板自己是半透白,背后的东西被它磨毛, 「毛玻璃」成立8。它和 filter 是一对:filter 模糊元素自己,backdrop-filter 模糊元素背后。

顺序与性能两条纪律

多个 filter 函数写在同一行时从左到右依次生效,顺序不同结果不同 (先模糊再变灰 ≠ 先变灰再模糊)9。性能纪律更硬:blur 和 backdrop-filter 计算昂贵, 书里点名要省着用——尤其在频繁动画的元素和低端手机上10。 这条和第 11 章的动效铁律(只动画 transform 和 opacity)是同一个道理:模糊类效果帧帧重算,扛不住。

6. 作者的判断与证据

  • 「阴影制造视觉层次,让卡片浮起来」——设计目的断言11。
  • 「别用纯黑做阴影,用 rgba(0,0,0,0.2) 一类」——经验断言,给的理由(更自然融合)成立3。
  • 「模糊与 backdrop-filter 计算昂贵,慎用」——性能断言,无实测数据,但与渲染机制一致10。
  • 「drop-shadow 用于透明 PNG,box-shadow 用于方盒」——分工断言7。
  • 证据类型同全书:经验断言 + 最小例子。

7. 边界与局限

  • 没讲 filter 的其余函数(contrast、saturate、hue-rotate、sepia),只列了最常用的四个。
  • 没讲 box-shadow 的过渡与动画用法(影子从小长到大是常见的「弹出」动效)——第 11 章补上了过渡的一般机制,但没专门回到影子。
  • backdrop-filter 的兼容性前缀史(-webkit-)未提,只在 iOS 旧版本上有现实意义。

判断(我们的,不是书里的): 「双层影子 = 悬浮感」是这一章最超值的半页—— 多数教程只给单影,双层近浓远淡的配方是「卡片为什么像 Material Design」的全部秘密。 性能警告的位置也给得对:放在滤镜一节而不是动效章,读者在学会用之前就先知道代价。 如果错,会错在: 随着浏览器合成器优化,backdrop-filter 的实际开销已比早年小得多, 「慎用」的分寸在 2026 年的设备上可以更松——但「动画元素上叠模糊」依然是最卡的组合,这条不过时。

8. 可带走的

  1. border-radius: 50% + 正方形 = 正圆头像,一行1。
  2. box-shadow 五参数:横偏、纵偏、模糊、扩张、颜色;外加 inset 翻成内阴影2。
  3. 影子用半透明黑 rgba(0,0,0,0.2),别用纯黑3。
  4. 双层影子(近浓远淡)做悬浮卡片4。
  5. text-shadow 没有扩张和 inset5。
  6. 透明 PNG 投影用 drop-shadow,方盒用 box-shadow7。
  7. blur/backdrop-filter 很贵:动画元素和低端手机慎用10。

9. 原文地图

主题原书章原文位置
深度错觉(阴影的目的)Chapter 13: Borders, Shadows & Effectstext/14-ch01-1-chapter-overview.txt:19(搜「Illusion of Depth」)
曲率概念同上text/14-ch01-1-chapter-overview.txt:21(搜「Curvature」)
50% 得正圆同上text/14-ch01-1-chapter-overview.txt:46(搜「perfect circle」)
box-shadow 五参数同上text/14-ch01-1-chapter-overview.txt:48(搜「box-shadow」)
标准卡片双层影同上text/14-ch01-1-chapter-overview.txt:115(搜「Standard Card」)
text-shadow 无 spread/inset同上text/14-ch01-1-chapter-overview.txt:74(搜「text-shadow」)
filter 四函数同上text/14-ch01-1-chapter-overview.txt:88(搜「filter」)
drop-shadow 跟轮廓同上text/14-ch01-1-chapter-overview.txt:102(搜「drop-shadow」)
毛玻璃三件套同上text/14-ch01-1-chapter-overview.txt:124(搜「Glassmorphism」)
纯黑影子的警告同上text/14-ch01-1-chapter-overview.txt:136(搜「Harsh Shadows」)
模糊的性能代价同上text/14-ch01-1-chapter-overview.txt:138(搜「computationally expensive」)
filter 顺序要紧同上text/14-ch01-1-chapter-overview.txt:142(搜「Order of Filters」)

Footnotes

  1. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:46,搜「perfect circle」)。原文:「12px creates subtle rounded corners. 50% on a square element creates a perfect circle.」 ↩ ↩2

  2. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:48,搜「box-shadow」)。原文语法行:box-shadow: [h-offset] [v-offset] [blur] [spread] [color] [inset];,各参数含义见第 56–66 段。 ↩ ↩2

  3. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:136,搜「Harsh Shadows」)。原文:「Avoid using solid black (#000) for shadows. Use rgba(0, 0, 0, 0.2) or similar to make the shadow look more natural and blended.」 ↩ ↩2 ↩3

  4. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:115,搜「Standard Card」)。原文:「Using multiple shadows or a soft blur to create a realistic sense of elevation.」双层影值见第 118–122 段。 ↩ ↩2

  5. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:74,搜「text-shadow」)。原文:「Unlike box-shadow, it does not have a spread or inset value.」 ↩ ↩2

  6. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:23,搜「Post-processing」)。原文:「The filter property applies effects after the element has been rendered, similar to adjustment layers in photo editors.」 ↩

  7. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:140,搜「box-shadow vs. drop-shadow」)。原文:「Use box-shadow for standard rectangular boxes. Use filter: drop-shadow() for images with transparency (like a PNG of a person) so the shadow follows the outline of the person, not the square box of the image.」 ↩ ↩2 ↩3

  8. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:124,搜「Glassmorphism」)。原文示例含注释「Blurs the content BEHIND the element」,即 backdrop-filter: blur(10px)。 ↩

  9. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:142,搜「Order of Filters」)。原文:「When applying multiple filters (e.g., filter: blur(5px) grayscale(100%);), the order matters. The filters are applied one after another from left to right.」 ↩

  10. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:138,搜「computationally expensive」)。原文:「The blur filter and backdrop-filter are computationally expensive. Use them sparingly, especially on elements that are frequently animated or on low-end mobile devices.」 ↩ ↩2 ↩3

  11. 出处:「Chapter 13: Borders, Shadows & Effects」(text/14-ch01-1-chapter-overview.txt:19,搜「Illusion of Depth」)。原文:「Shadows (box-shadow) are used to create a visual hierarchy, making elements like buttons or cards appear to 'float' above the page.」 ↩

颜色与背景 — 四种写法、两个透明、一对尺寸

Previous Page

动效三件套 — 过渡、变换、动画

Next Page

On this page

圆角、阴影与滤镜 — 立体感的来源与代价1. 这一章在全书链条里的位置2. 顶层全景:三个属性,三种「加工工序」3. 核心原理:border-radius,从圆角到圆4. 核心原理:box-shadow 的五个参数主线例子:一行影子,逐个参数拆解5. 核心原理:filter——渲染之后的后期处理顺序与性能两条纪律6. 作者的判断与证据7. 边界与局限8. 可带走的9. 原文地图Footnotes