当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第四部分 视觉增强技术 ✔️
- 【第 13 章 渐变、阴影与混合模式】 ✔️
- 13.1 渐变
- 13.1.1 使用多个颜色节点（上）
- 13.1.2 颜色插值方法（中）
- 13.1.3 径向渐变（下）
- 13.1.4 锥形渐变（下）
- 13.2 阴影 ✔️
- 13.2.1 利用渐变和阴影打造立体感 ✔️
- 13.2.2 使用扁平化设计创建元素 ✔️
- 13.2.3 创建混合风格的按钮外观 ✔️
- 13.3 混合模式
文章目录
- 13.2 阴影 Shadows
- 13.2.1 利用渐变和阴影打造立体感 Adding depth with gradients and shadows
- 13.2.2 使用扁平化设计创建元素 Creating elements with a flat design
- 13.2.3 创建混合风格的按钮外观 Creating buttons with a hybrid look
《CSS in Depth》新版封面
13.2 阴影 Shadows
阴影是另一种可以给页面增加立体感的特效。有两个属性可以创建阴影，box-shadow 可以为元素盒子生成阴影，text-shadow 则可以为渲染后的文字生成阴影。前面章节已经用过一两次 box-shadow 属性了，本节再进一步研究一下它的工作原理。
声明 box-shadow: 15px 15px black 生成了如图 13.11 所示的阴影效果。其中 15px 代表偏移量，即阴影从元素的位置偏移了多少距离（方向先水平、再垂直）。如果偏移量都设为 0，则阴影将直接渲染到元素后方（behind the element）。black 指明了阴影的颜色。
【图 13.11 一个基础的盒阴影效果】
默认情况下，阴影与元素的大小和尺寸完全相同。如果元素设置了 border-radius，则阴影相应地也会带有圆角。阴影的水平偏移量（x）、垂直偏移量（y）以及颜色在定义是都是不可或缺的，还有两个可选配置：模糊半径（blur radius）和扩展半径（spread radius）。完整的语法结构如图 13.12 所示。
【图 13.11 盒阴影语法规则】
模糊半径用于控制阴影边缘模糊区域的大小，可以为阴影生成一个更柔和、略带透明的边缘效果。扩展半径则用于控制阴影的大小，设为正值可令阴影全方位变大；为负值则会变小。
13.2.1 利用渐变和阴影打造立体感 Adding depth with gradients and shadows
下面利用渐变和阴影来实现图 13.13 所示的按钮效果。从上到下的渐变设置可以让按钮产生弧形的 3D 效果，而阴影设置进一步增强了这种效果。此外，我们还将在本例中通过 :active 伪类来实现另一种阴影效果，并令其在按钮按下时生效。
【图 13.13 使用了渐变和阴影的按钮效果】
本例中的渐变幅度很小，小到您甚至都不会立即注意到；但它确实能让按钮带有一丝圆润饱满的感觉。阴影做了一些模糊处理，这样看起来更自然。点击按钮时，阴影效果没有了，取而代之的是出现在按钮边框内部的 内嵌（inset） 阴影。通过在盒阴影的开头添加关键字 inset，阴影效果渲染在了元素内部而非外部。该内嵌阴影效果覆盖了背景图片效果（即渐变）。
内嵌阴影让按钮有了一种被摁下的感觉，就仿佛用户真的在网页上按下了按钮一样；只要松开鼠标，按钮又恢复了最初的效果。这是通过按钮的 :active 状态实现的。
为按钮创建一个新页面并关联一个新的样式表，然后将如下的按钮 HTML 标记添加到页面中：
<button class="button">Sign up now</button>
接着将代码清单 13.11 中的样式添加到样式表。这些样式覆盖了浏览器默认的字号和边框效果，同时还设置了按钮的大小，并添加了一个带盒阴影效果的渐变背景。
代码清单 13.11 带有渐变及阴影效果的按钮样式代码
.button {padding: 1em;border: 0;font-family: Helvetica, Arial, sans-serif;color: white;border-radius: 0.5em;background-image: linear-gradient( /* 从中蓝色渐变到略深一点的蓝色 */to bottom,oklch(57% 0.11 263deg),oklch(40% 0.13 263deg));box-shadow: 0.1em 0.1em 0.5em oklch(26% 0.07 263deg); /* 模糊半径为 0.5em 的深蓝色阴影 */
}.button:active {/* 两个内嵌式盒阴影效果 */box-shadow: inset 0 0 0.5em oklch(26% 0.07 263deg),inset 0 0.5em 1em rgb(0 0 0 / 0.4);
}
background-image 属性设置了由两个相仿蓝色组成的渐变。盒阴影的偏移量并不多，仅向右、向下各偏移了 0.1em；模糊效果也比较温和，只有 0.5em。阴影偏移量越大，图片从页面被“抬升”的感觉就越明显，相应的立体感也就更强。在按钮激活状态下，盒阴影效果也随之改变。
注意，上述代码给激活状态下的按钮设置了多个阴影效果，并用逗号隔开。利用这种形式可以给元素添加多个阴影效果。
其中第一个内嵌阴影（即 inset 0 0 0.5em oklch(26% 0.07 263deg)）的偏移量均为 0，略带模糊效果。这样会在元素的边缘内添加一个环形阴影；第二个内嵌阴影（即 inset 0 0.5em 1em rgb(0 0 0 / 0.4)）在垂直方向略有些偏移，从而使按钮顶部更加明显。RGB 颜色表示法定义了一个半透明的黑色。建议您自己动手改改这些参数值，看看它们究竟是如何影响最终的渲染效果的。
将屏幕上的元素设计得如同真实世界的实物（该方法也称为 拟物化设计（skeuomorphism）），这种设计理念在前几年应用广泛。在真实世界中，物体是不具备完美的纯色质感的。即使是光滑的表面，也会受到各种光线反射的影响，产生高亮区域（highlights）和阴影区域（shadows）。
为按钮添加圆润饱满的外观、角度合适的阴影，就可以让它看起来像个真实的物件。其他常见的拟物化设计元素还有针织边框以及类似皮革纹理的图片等。虽然这种设计理念已经不太常见了，但它也可以作为 CSS 渐变与阴影效果协同工作的经典案例。下面让我们再看看可用于按钮样式设计的一些其他方法。
13.2.2 使用扁平化设计创建元素 Creating elements with a flat design
在拟物化设计追求尽量贴近真实世界的同时，扁平化设计则坦然接受现代社会业已数字化的事实。扁平化设计讲究色彩明快统一、外观简洁明了，这就意味着尽量少使用渐变、阴影和圆角。颇具讽刺意味的是，扁平化设计理念的日益兴盛，恰恰是在 CSS 推出这些千呼万唤方才出台的特效规范之后。在此之前，阴影、渐变和圆角边框只能通过图片来实现。
扁平化设计并不是说完全不使用这些特效，用还是要用的，但是得用得巧用得妙。例如，前面使用的渐变是从浅蓝色过渡到中蓝色，现在也可以使用两个不同的蓝色渐变，只是渐变的幅度小到几乎察觉不出；再比如，让某个元素拥有特别小的阴影效果，小到几乎可以忽略不计。同时设置渐变和阴影的情况倒比较少见。
下面我们将用扁平化的方式重新设计一下按钮。最终的按钮效果如图 13.14 所示。它看上去已经不太像真实世界里的物件了，尽管按钮下方还是有一道淡淡的阴影。
【图 13.14 具有扁平化外观的按钮效果】
上述效果的具体样式代码详见代码清单 13.12，其中包括了鼠标悬停与按钮激活两个状态。根据其中的代码注释同步更新本地 CSS 样式。同时还要注意，前面示例代码中的圆角边框效果已经被移除了。
代码清单 13.12 包含鼠标悬停及按钮激活状态的按钮扁平化设计
.button {padding: 0.8em;border: 0;font-family: Helvetica, Arial, sans-serif;color: white;background-color: oklch(57% 0.11 263deg); /* 纯色背景（不带渐变） */box-shadow: 0 0.2em 0.2em rgb(0 0 0 / 0.15); /* 阴影极浅的阴影效果 */
}
.button:hover {background-color: oklch(53% 0.13 263deg); /* 鼠标悬停状态下，颜色略微加深 */
}
.button:active {background-color: oklch(40% 0.13 263deg); /* 按钮激活状态下，颜色略微加深 */
}
上述代码中的盒阴影效果出现了一些变化。由于仅在垂直方向存在偏移量，这样就只有向下的阴影效果，与之前看上去很自然的阴影角度不太一样；同时又采用了 RGB 颜色表示法，令其红、黄、蓝三原色的值均为 0（即渲染为黑色），且 α 值为 0.15（几乎完全透明）。鼠标悬停与按钮激活状态下的外观也是扁平化的，只是将背景色变成了偏暗一些的蓝色。
13.2.3 创建混合风格的按钮外观 Creating buttons with a hybrid look
时至今日，扁平化设计风格依然流行，只是一直在演化。其中一种通用的设计方案是介于扁平化设计与拟物化设计之间。下面再来实现一版如图 13.15 所示的按钮效果。这次的设计融合了两种不同风格的设计元素。
【图 13.15 另一种风格的扁平化按钮设计】
新版设计还算简约，只是按钮底部多出一个厚厚的边框，看上去很像某个 3D 立方体的正面。这条深色的线其实并不是通过 border 实现的，而是一个不加模糊效果的 box-shadow。这样阴影的边缘就能产生和圆角边框相同的圆弧效果。
在激活状态下，按钮向下移动了几个像素，给人一种摁下按钮时按钮会往页面里陷的错觉。试根据代码清单 13.13 同步更新样式表。
代码清单 13.13 当下流行的按钮样式
.button {padding: 0.8em;border: 0;border-radius: 0.5em; /* 改回了圆角边框 */font-family: Helvetica, Arial, sans-serif;color: white;background-color: oklch(57% 0.11 263deg);box-shadow: 0 0.4em oklch(40% 0.13 263deg); /* 按钮下方添加了一块阴影（不带模糊效果） */text-shadow: 1px 1px oklch(40% 0.13 263deg); /* 略微带了些文字阴影 */
}
.button:active {background-color: oklch(53% 0.13 263deg);transform: translateY(0.1em); /* 点击时，按钮下移 */box-shadow: 0 0.3em oklch(40% 0.13 263deg); /* 减少了阴影区域的大小，以抵消按钮的位移量 */
}
这里的按钮以一种截然不同的方式来处理 box-shadow 属性：没有模糊效果的叠加，也没有复制阴影，而是让阴影的边缘保持清晰。这样看起来就像一个厚厚的底部边框；但是与真正的边框相比还是有差别的，因为它的圆角弧度可以完美贴合元素的圆角边框。
此外，按钮文字也设置了阴影效果，文字阴影与盒阴影极其相似，不同之处在于前者只对渲染出的文字产生阴影效果，而非整个元素盒子。文字阴影的语法也与盒阴影殊无二致：水平偏移量（x-offset）、垂直偏移量（y-offset）、模糊半径（blur radius，可选）以及阴影的颜色。但与 box-shadow 不同的是，文字阴影 text-shadow 属性不支持 inset 关键字和扩展半径。上述示例中，我们给文字添加了一个深蓝色的阴影，且每个方向各偏移了 1px。
在按钮激活状态下，我们也做了一些新的修改。先是用到了 transform 属性和 translateY() 函数，使元素在屏幕上下移了 0.1em。相关用法将在第 16 章深入解析 transform 变换时详细论述。接着我们又把盒阴影的垂直偏移量减少了同样的距离（由 0.4em 改为 0.3em）。这样，一旦按下按钮，按钮就会移动，但盒阴影固定不动。您可以点击按钮看看最终效果。
渐变和阴影可以通过各种各样的方式来组合使用。随着时间的推移，又会有新的设计理念流行起来。我们要做的，无非是今后见到某个网站上的新设计时，主动停下来花些时间琢磨琢磨，用浏览器的开发者工具检查一下，看看它究竟是如何实现的。不要舍不得动手，毕竟实践出真知。
关于《CSS in Depth》（中译本书名《深入解析 CSS》）
| 第 1 版 | 第 2 版 | |
|---|---|---|
| 读者评分 | 原版：4.7（亚马逊）；中文版：9.3（豆瓣） | 原版：5.0（亚马逊）；中文版：暂无，待出版 |
| 出版时间 | 原版：2018 年 3 月；中文版：2020 年 4 月 | 原版：2024 年 7 月；中文版：暂无，待出版 |
| 原价 | 原版：$44.99；中文版：￥139.00 | 原版：$59.99；中文版：暂无，待出版 |
| 现价 | 原版：$36.49；中文版：￥52.54 起步 | 原版：$52.09；中文版：暂无，待出版 |
| 原版国内预订 | 起步价 ￥461.00 | 起步价 ￥750.00 |
本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！
目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：
- 第一章 层叠、优先级与继承（已完结）
- 1.1 层叠
- 1.2 继承
- 1.3 特殊值
- 1.4 简写属性
- 1.5 CSS 渐进式增强技术
- 1.6 本章小结
- 第二章 相对单位（已完结）
- 2.1 相对单位的威力
- 2.2 em 与 rem
- 2.3 告别像素思维
- 2.4 视口的相对单位
- 2.5 无单位的数值与行高
- 2.6 自定义属性
- 2.7 本章小结
- 第三章 文档流与盒模型（已完结）
- 3.1 常规文档流
- 3.2 盒模型
- 3.3 元素的高度
- 3.4 负的外边距
- 3.5 外边距折叠
- 3.6 容器内的元素间距问题
- 3.7 本章小结
- 第四章 Flexbox 布局（已完结）
- 4.1 Flexbox 布局原理
- 4.2 弹性子元素的大小
- 4.3 弹性布局的方向
- 4.4 对齐、间距等细节处
- 4.5 本章小结
- 第五章 网格布局（已完结）
- 5.1 构建基础网格
- 5.2 网格结构剖析 （上）
- 5.2.1 网格线的编号（下）
- 5.2.2 网格与 Flexbox 配合（下）
- 5.3 两种替代语法
- 5.3.1 命名网格线
- 5.3.2 命名网格区域
- 5.4 显式网格与隐式网格（上）
- 5.4.1 添加变化 （中）
- 5.4.2 让网格元素填满网格轨道（下）
- 5.5 子网格（全新增补内容）
- 5.6 对齐相关的属性
- 5.7 本章小结
- 第六章 定位与堆叠上下文（已完结）
- 6.1 固定定位
- 6.1.1 创建一个固定定位的模态对话框
- 6.1.2 在模态对话框打开时防止屏幕滚动
- 6.1.3 控制定位元素的大小
- 6.2 绝对定位
- 6.2.1 关闭按钮的绝对定位
- 6.2.2 伪元素的定位问题
- 6.3 相对定位
- 6.3.1 创建下拉菜单（上）
- 6.3.2 创建 CSS 三角形（下）
- 6.4 堆叠上下文与 z-index
- 6.4.1 理解渲染过程与堆叠顺序（上）
- 6.4.2 用 z-index 控制堆叠顺序（上）
- 6.4.3 深入理解堆叠上下文（下）
- 6.5 粘性定位
- 6.6 本章小结
- 第七章 响应式设计（已完结）
- 7.1 移动端优先设计原则（上篇）
- 7.1.1 创建移动端菜单（下篇）
- 7.1.2 给视口添加 meta 标签（下篇）
- 7.2 媒体查询（上篇）
- 7.2.1 深入理解媒体查询的类型（上篇）
- 7.2.2 页面断点的添加（中篇）
- 7.2.3 响应式列的添加（下篇）
- 7.3 流式布局
- 7.4 响应式图片
- 7.5 本章小结
- 第八章 层叠图层及其嵌套
- 8.1 用 layer 图层来操控层叠规则（上篇）
- 8.1.1 图层的定义（上篇）
- 8.1.2 图层的顺序与优先级（下篇）
- 8.1.3 revert-layer 关键字（下篇）
- 8.2 层叠图层的推荐组织方案
- 8.3 伪类 :is() 和 :where() 的用法
- 8.4 CSS 嵌套的使用
- 8.4.1 嵌套选择器的使用
- 8.4.2 深入理解嵌套选择器
- 8.4.3 媒体查询及其他 @规则 的嵌套
- 8.5 本章小结
- 第九章 CSS 的模块化与作用域
- 9.1 模块的定义
- 9.1.1 模块和全局样式
- 9.1.2 一个简单的 CSS 模块
- 9.1.3 模块的变体
- 9.1.4 多元素模块
- 9.2 将模块组合为更大的结构
- 9.2.1 模块中多个职责的拆分
- 9.2.2 模块的命名
- 9.3 CSS 的作用域
- 9.3.1 CSS 作用域的就近原则
- 9.3.2 划定作用域的边界
- 9.3.3 CSS 中的隐式作用域
- 9.3.4 关于 CSS 作用域与层叠图层
- 9.4 CSS 模式库
- 9.5 本章小结
- 第十章 CSS 容器查询
- 10.1 容器查询的一个简单示例
- 10.1.1 容器尺寸查询的用法
- 10.2 深入理解容器
- 10.2.1 容器的类型
- 10.2.2 容器的名称
- 10.2.3 容器与模块化 CSS
- 10.3 与容器相关的单位
- 10.4 容器样式查询的用法
- 10.4.1 将模块与所在容器解耦
- 10.4.2 减少重复代码
- 10.5 本章小结
- 第 11 章 颜色与对比
- 11.1 通过对比进行交流
- 11.1.1 模式的建立
- 11.1.2 还原设计稿
- 11.2 颜色的定义
- 11.2.1 色域与色彩空间
- 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
- 11.3 利用 OKLCH 处理颜色（上篇）
- 11.3.4 从页面其他颜色衍生出新颜色（下篇）
- 11.4 思考字体颜色的对比效果
- 11.5 本章小结
- 第 12 章 CSS 排版与间距
- 12.1 间距设置
- 12.1.1 使用 em 还是 px
- 12.1.2 对行高的深入思考
- 12.1.3 行内元素的间距设置
- 12.2 Web 字体
- 12.3 谷歌字体
- 12.4 @font-face 的工作原理
- 12.4.1 字体格式与回退处理
- 12.4.2 同一字型的多种变体形式
- 12.5 性能因素考量
- 12.5.1 font-display 属性解析
- 12.5.2 可变字体的用法
- 12.6 调整字间距，提升可读性
- 12.6.1 正文的字间距
- 12.6.2 标题、小元素和间距
- 12.7 本章小结
- 附录
- 附录A：CSS 选择器参考
- 附录B：CSS 预处理器简介
