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

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

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% 把每个角弯到最大——在正方形上,四个角正好弯成一个正圆,圆形头像就这么一行¹。注意前提是「正方」:长方形设 50% 出来的是椭圆。圆角不只是装饰——上一章见过, 圆角容器要配 overflow: hidden 裁齐角上溢出的内容(第 05 章模式)。

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

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

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

.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) 这种半透明黑才像自然光下的影子,纯黑像贴上去的纸³。第六个参数 inset 把影子从「盒子外」翻进「盒子内」——内阴影,按下去的效果。

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

.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. 核心原理:filter——渲染之后的后期处理¶

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

函数	作用	例
`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(...) 影子才贴着人⁷。

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

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

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

顺序与性能两条纪律¶

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

6. 作者的判断与证据¶

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

7. 边界与局限¶

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

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

8. 可带走的¶

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

9. 原文地图¶

主题	原书章	原文位置
深度错觉(阴影的目的)	Chapter 13: Borders, Shadows & Effects	`text/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」)

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