靠CSS 就写出创意十足的设计是很困难的。到目前为止，就创建视觉特效而言，CSS 这门语言还是存在诸多限制。想用CSS 写出Photoshop 般的效果，还差得很远，个别情况下仍需要各种奇奇怪怪的招术助阵。

以前，要绕过种种限制，不得不牺牲简洁性（加入大量元素，只为了展示效果的细节），或者牺牲性能（为了展现视觉效果，页面中放了太多图片及JavaScript）。

今天，我们就来介绍几种能够通过CSS 实现的特效。其中用到的一些CSS 特性还很新，浏览器支持不充分，但也有非常成熟的。很多特性在SVG 中已经存在很多年了，最近才加入到CSS 中。

这些技术能够提升你的设计，就像做菜添加了调味料，平淡无奇的一盘菜也能顿时浓香四溢。使用它们的时候也得小心谨慎，必须考虑渐进式增强。另外也要知道，其中一些技术会有相关的bug。即使在支持它们的浏览器中，它们也通常还并不成熟。

图1 展示了一个页面（一些天体的介绍），其中包含很多视觉特效。就在几年前，要通过CSS 实现这些效果几乎是不可能的。整个页面布局，就算能做出来，也要借助大量图片和额外的HTML 元素。

今天，这些效果已经能够在很多浏览器中通过CSS 来呈现了，即使做不到也能平稳地退化为可用版本。在一个页面上集成大量视觉特效仍须谨慎，因为可能造成性能开销，代价有大有小。

尽管如此，通过CSS 来完成它们仍然有很多好处，因为可以减少不必要的标记，而且维护起来比较容易。此外，随着浏览器支持相应的规范，性能也会越来越好。

接下来，我们就以这个“观星指南”页面作为例子，逐个讲解其中涉及的技术点。

CSS Shapes

大家可能都知道，网页布局基本上都是由矩形构成的，CSS Shapes 是一个新标准，旨在让Web 设计者能使用各种形状。形状元素不仅会影响界面的外观，还会影响页面的内容流。

细说形状

CSS Shapes 包含两组新属性，一组用于设置影响盒子中内容的形状，另一组用于设置影响形状元素周边内容流的形状。在图2 中，我们看到一个被设置为圆形的形状。其中左边的图形展示了外部形状如何影响周边的内容，而右边的图形展示了圆形中的内容如何受到内部形状的影响。

这两种形状分别由不同级别的CSS Shapes 规范定义。其中shape-outside 属性（在CSS Shapes Level 1 中定义）是唯一相对比较成熟的。本文不涉及shape-inside，因为目前还没有浏览器实现它，也许在不久的将来会有吧。

shape-outside 属性只能应用给浮动元素。这个属性不改变元素自身的外观，只会通过设置形状影响其外部内容流。

在我们例子中的“Moon”部分，通过设置shape-outside: circle();实现了文本流环绕月亮图片的效果（见图3）。

.fig-moon {
 float: right;
 max-width: 40%;
 shape-outside: circle();
}

在解释形状构造原理之前，先了解一下shape-outside 如何影响布局。图片文件本身的背景是黑色的，如果把这一区块的背景改成其他颜色，我们会看得更清楚（见图4）。图片本身还是方形的，但文本流环绕着其中的圆形。在不支持CSS 形状的浏览器中，文本会像往常一样环绕矩形。

注意：如图4 所示，文本流只绕排在浮动元素的左侧。只能让形状的一侧影响文本的行盒子。即使形状右侧有空间，文本也不会填进去。

1. 形状函数

前面例子中的shape-outside 属性使用了一个值：circle()。这是一个形状函数，类似的形状函数还有ellipse()、polygon()、inset()。前两个分别用于定义椭圆形和多边形，inset()则表示嵌入在盒子边界内的矩形，也可以指定圆角，算是CSS 2.1 中clip 属性的加强版，只是语法不同而已。

此处圆形和椭圆形的语法，类似于第5 章的放射性渐变的大小及位置的语法：

.shape-circle {
 /* 圆形接受一个半径值和一个位置值 */
 shape-outside: circle(150px at 50%);
}
.shape-ellipse {
 /* 椭圆形接受两个半径值和一个位置值 */
 shape-outside: ellipse(150px 40px at 50% 25%);
}

与渐变函数类似，圆形和椭圆形函数也有合理的默认值。前面月亮图片的circle()函数并未传入参数，而默认的参数是以元素中心为圆心，以最近边为半径。

inset()函数需要传入一组长度值，分别表示到上、右、下、左边的距离，很像margin 和padding 简写。同样，1~3 个值的外边距和内边距简写规则在这里也适用。此外，还可以通过round关键字指定圆角，随后是半径值，与border-radius 属性的类似：

.shape-inset {
 /* 距离外部盒子的上、下边各20 像素，
 * 距离外部盒子的左、右边各30 像素，
 * 还有半径为10 像素的圆角
 */
 shape-outside: inset(20px 30px round 10px);
}

相对复杂一些的是polygon()函数。这个函数接受一系列坐标对，用于在盒子表面指定多个点，坐标相对于盒子的左上角，最终把各个点连接起来就是要创建的形状。在“Planets”部分，我们为土星创建了一个多边形。

创建多边形最简单的一种方式就是使用CSS Shapes Editor 插件，它支持Chrome 和Opera。Chrome 和Opera 都支持CSS Shapes，而且会在检查形状元素时给出预览。这个插件会添加额外的工具，因此既可以通过它看到形状如何影响页面，也可以通过创建并拖动控制点来创建新形状（见图5）。

然后就可以把得到的多边形复制粘贴到代码中：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: polygon(41.85% 100%, 22.75% 92.85%, 5.6% 73.3%, 0.95% 52.6%, 5.6% 35.05%,
21.45% 17.15%, 37.65% 12.35%, 40% 0, 100% 0%, 100% 100%);
}

多边形中每个点的坐标以百分比表示，这样可以保证最大的灵活度。当然也可以在这里使用任意长度值，比如像素、em，甚至calc()表达式。

2. 形状图片

基于复杂的图片创建多边形会非常麻烦。好在我们可以直接在图片的源文件上基于透明度来创建形状。比如，可以比照预期的形状新创建一张图片。但土星的图片已经是带透明度的PNG格式了，因此可以直接通过它来生成形状。我们要做的就是把shape-outside 的值由polygon()函数修改为指向该图片的url()函数：

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
}

如果在Chrome 开发者工具里检查这张图片，会看到如图6 所示的模样。可以看到，图片的透明度数据被用于生成形状了。

提示：只通过浏览器打开HTML 文件是不行的，就算浏览器支持CSS Shapes 也不行。必须通过Web 服务器取得这个页面，这样引用的图片才会带有合适的HTTP 首部信息，告诉浏览器该图片与CSS 来自同一个域。这种安全机制是较新的浏览器才有的，是为了防止引用的文件对你的计算机造成危害。

默认情况下，形状轮廓会沿图片完全透明区域的边缘生成，但这个值可以通过shape-imagethreshold 属性来修改。默认值是0.0（完全透明），而较大的值（最大为1.0）意味着较高的不透明度也可以用于生成形状边界。比如，修改土星图片的不透明度阈值为0.9，则半透明的土星环将不再被包含在形状内，结果文本会覆盖其上（见图7）。

.fig-planet {
 float: right;
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-image-threshold: 0.9;
}

3. 形状盒子与边距

除了使用形状函数或图片，还可以使用元素的参照盒子来生成形状。乍一听好像有点不对，毕竟元素盒子都是方形的。不过，形状也能依照圆角生成。

比如，以前面的月亮图片为例，如果我们想改变区块背景的颜色，同时也去掉图片周围的黑色区域（如图11-8 所示），那么可以在图片上使用border-radius 来创建圆形。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
}

仅有圆角边框还不能生成形状，还得通过shape-outside 属性告诉浏览器，以border-box作为生成形状的依据。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: border-box;
}

这样外部形状就变成了环绕元素边框盒子的圆形。其他能生成形状的参照盒子还有content-box、padding-box 和margin-box。margin-box 是个例外。因为形状是基于浮动区域的，浮动区域也包含外边距，所以这个关键字是专门为形状定义的，并没有box-sizing: margin-box 这种用法。

对于形状而言，参照盒子为margin-box 时，形状仍然会参照圆角边框，但这样一来就可以像定义常规的外边距一样，给月亮图片周围添加一些边距了。

.fig-moon {
 float: right;
 max-width: 40%;
 border-radius: 50%;
 shape-outside: margin-box;
 margin: 2em;
}

这样，文本会环绕着弧形的外边距形状排布。如果在Chrome 开发者工具中检查图片，可以看到此时形状的样子，还有原始的外边距（见图9）。

如果想给更复杂的土星图片添加外边距，可以使用另一个属性shape-margin，这个属性用于给整个形状添加外边距，与创建形状的方法无关（见图10）。

.fig-planet {
 max-width: 65%;
 shape-outside: url(img/saturn.png);
 shape-margin: 1em;
}

剪切与蒙版

CSS 形状虽然可以影响周围文本流，却不允许你修改元素自身的外观。添加圆角边框只是视觉上改变元素形状的一种方式。实际上，通过把元素的部分区域变透明，是可以影响元素自身形状的。

剪切（clipping）使用路径形状定义硬边界，可以基于该边界完全切换元素的可见性。蒙版（masking）不太一样，它用于将元素的某些区域设置为更透明或更不透明。剪切会影响对象的响应区域，而蒙版不会。比如要触发悬停，鼠标必须移到剪切后元素的可见区域。而对于加了蒙版的元素，无论鼠标下面的区域是否可见，只要位于该元素上，都会激活:hover 状态。

一、剪切

剪切最早是在CSS 2.1 中通过clip 属性引入的。但这个属性只能应用给绝对定位的元素，而且只能把这些元素剪切为矩形（使用rect()函数）。没劲！

好在新的clip-path 属性提供了更多选择。它可以使用CSS 形状中的基本形状函数定义如何剪切元素。它还能使用SVG 文档剪切元素，只要通过URL 引用一个<clipPath>元素即可。

下面从使用形状函数定义剪切路径开始。这个特性之前只有Blink 和WebKit 内核的浏览器支持，而且除了不加前缀的属性，还要使用加-webkit-前缀的属性。为简单起见，后面的例子只展示不加前缀的标准属性。

“观星指南”页面中的所有区块都是被剪切过的，因此都有一些向对角线倾斜（见图11）。

每个区块都有一个stacked 类，其中使用多边形函数指定了剪切路径：

.stacked {
 clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0% 100%);
}

这个多边形没有前面土星的多边形复杂，因此可以稍微深入地讲解一下。多边形中的每一个点都对应着一对空格分隔的值，值对之间以逗号隔开。

先从左上角开始，0 3vw 表示x 轴剪切长度为0，y 轴剪切长度为3vw。这里使用相对视口的单位保证角度以视口大小为参照。接下来的坐标是右上角坐标100% 0。第三个100% calc(100% -3vw)指距右下角3vw，它不能使用百分比表示，因为这个y 轴坐标是从上方开始计算的。最后，左下角的坐标是0 100%。

因为剪切路径只影响元素渲染后的外观，而不会影响页面流，所以剪切后的元素之间会出现透明间隙（见图11-12）。为消除间隙，可以给每个堆叠的区块应用一个负外边距，而且要比3vm稍大一些，好让相邻的区块边缘能彼此重叠。但我们只希望在支持clip-path 的浏览器中应用这个负外边距，这时候正好可以用上@supports 规则。因为这些新的特效只在较新的浏览器中才存在，所以我们可以放心地这么写：

@supports ((clip-path: polygon(0 0)) or
 (-webkit-clip-path: polygon(0 0))) {
 .stacked {
 margin-bottom: -3.4vw;
 }
}

在@supports 规则块中，我们测试了浏览器是否支持最小的多边形（只有一个点）。增加这些保障后，区块就可以完美地对齐了。而在不支持clip-path 的浏览器中，区块也会像平常一样上下相接，不会重叠。

使用SVG

可以使用polygon()、circle()、ellipse()和inset() 函数创建剪切路径，与创建CSS形状一样。对于复杂的形状，建议大家还是使用图片编辑器来创建，然后再将最终的图形作为剪切路径的源。我们在页面导航中使用的形状就是这样生成的，如图13 所示。

使用图形作为剪切源，需要先使用SVG 创建剪切路径，然后再通过一个URL 引用到形状函数中。首先，要在Illustrator、Sketch 或Inkscape 之类的图形编辑器中创建想要的形状。虽然不那么简单，但还是可行的。

导航区块本身是一个包含页内链接的无序列表：

<nav class="stacked section nav-section inverted">
 <ul class="wrapper">
 <li><a href="#moon">The Moon</a></li>
 <li><a href="#sun">The Sun</a></li>
 <li><a href="#planets">Planets</a></li>
 <li><a href="#milky-way">Galaxy</a></li>
 <li><a href="#universe">Universe</a></li>
 </ul>
</nav>

在此，我们就不涉及导航本身的样式了，大家只要知道这里用到了Flexbox 水平布局导航项目，将它们固定为100 像素见方的方块就够了。

然后，在支持SVG 的图形编辑器（我们用的是Adobe Illustrator）中创建一张图片。图片的大小也是100 像素见方（见图14）。其中的星球由两个黑色的形状构成，一个圆形和一个旋转后的椭圆形。接着把这个图片保存为SVG 格式，命名为clip.svg。保存过程因编辑器而异，这里

就不说了，我们只关注大体的流程。

下面在代码编辑器中打开生成的SVG 文件，看上去大概是这样的：

<svg xmlns=http://www.w3.org/2000/svg width="100px" height="100px" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="45"/>
 <ellipse transform="matrix(-0.7553 0.6554 -0.6554 -0.7553 -12.053 54.99)" cx="50" cy="50"
rx="63.9" ry="12.8"/>
</svg>

为了把这个图片转换为剪切路径，需要把其内容包装在一个<clipPath>元素中，并添加一个ID 属性：

<svg xmlns="SVG namespace"
 width="100px" height="100px" viewBox="0 0 100 100">
 <clipPath id="saturnclip">
 <circle cx="50" cy="50" r="40.1"/>
 <ellipse transform="matrix(0.7084 -0.7058 0.7058 0.7084 -20.7106 49.8733)" cx="50"
 cy="50" rx="62.9" ry="12.8"/>
 </clipPath>
</svg>

最后，就可以在CSS 中引用clip.svg 中的这个剪切路径了：

.nav-section [href="#planets"] {
 clip-path: url(img/clip.svg#saturnclip);
}

这样就可以把多个剪切源保存在一个SVG 文件中，然后通过URL 的片段ID 分别引用。

二、蒙版

“观星指南”页面的标题好像半隐于地球大气层的后面（见图15）。这种透明渐隐效果是通过蒙版实现的。

Safari 早在2008 年就实现了蒙版，使用的是非标准属性-webkit-mask-image。这个属性允许指定一张图片，并以这张图片作为加蒙版元素透明度层次的来源。作为蒙版的图片中，每个像素都有一个阿尔法级别（alpha level），也就是透明度。如果蒙版图片中的像素是透明的，那么加蒙版元素中对应的像素也不可见。相反，蒙版图片中完全不透明的区域，对应的加蒙版元素的区域也会完全可见。蒙版图片的颜色与此无关，因此灰度图常用作蒙版。

除了图片，还可以使用CSS 渐变来创建蒙版。页面标题的蒙版效果就是这么做的：

.header-title {
 mask-image: radial-gradient(ellipse 90% 30% at 50% 50%,
 rgba(0,0,0,0) 45%,
 #000 70%);
 mask-size: 100% 200%;
}

相信大家都了解这个语法：mask-image 后面的值非常类似background-image 属性的值，甚至也可以声明多个蒙版。

除了指定蒙版图片，还可以指定蒙版的大小和位置。对于我们这个例子而言，为了把蒙版放到文本底部，我们将它的高度声明为两倍，而没有使用定位。如果我们在这里简单地把渐变图片移动到下面，那么蒙版图片的上半部分就会是透明的，结果就是文本的上半部分不可见。图16展示了渐变蒙版的大小和位置，以及它与文本的相对位置关系。

在WebKit 最初实现的基础上，蒙版相关的属性得以标准化和扩展，同时也支持了对应的SVG效果。没错，就像clip-path 一样，SVG 中的蒙板也可以应用给HTML 内容。

.header-title {
 /*嵌入页面中的CSS，指向嵌入同一页面中的SVG <mask>元素*/
 mask: url(#ellipseMask);
}
与前面CSS 渐变等价的SVG 标记如下：
<mask id="ellipseMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
 <radialGradient id="radialfill" r="0.9" cy="1.1">
 <stop offset="45%" stop-color="#000"/>
 <stop offset="70%" stop-color="#fff"/>
 </radialGradient>
</mask>

与剪切路径一样，这里也需要使用objectBoundingBox 坐标系，按照0~1 的比例尺将蒙版缩放到与元素边界匹配。SVG 蒙版元素本身还有一个maskContentUnits 属性，这里也将其设置为与蒙版形状相同的坐标系。

SVG 蒙版源使用明度值（luminance）而非阿尔法级别来应用蒙版。这意味着蒙版较暗的区域对应的加蒙版元素区域会较透明，而蒙版较亮的区域对应的加蒙版元素区域会较不透明。在前面SVG 蒙版的例子中，我们使用了黑白渐变。

浏览器会在你使用蒙版图片时使用阿尔法级别，在你使用SVG 蒙版时使用明度值。在对标准的建议中，有一个mask-type 属性可以切换这个应用蒙版的依据值。

另外，-webkit-前缀版与建议的标准版属性之间也有一些差异。可以参考MDN 中WebKit实现的完整属性和语法。

——

本文很大程度上跳出了沉闷单调的页面盒子世界。我们探讨了如何通过CSS 形状美化页面中的元素，以及如何通过剪切路径画出视觉边界。使用蒙版则可以进一步控制界面中元素的可见性。

通过这些特效的学习，我们也看到了SVG 与CSS 结合的威力，也极大扩展了我们未来设计的想象空间。

——本文节选自《精通CSS：高级Web标准解决方案（第3版）》

CSS作为Web标准的一部分，是现代网页设计中必不可少的关键元素。鉴于CSS标准化的快速发展，想要成为CSS高手，打造出令人惊艳、辨识度高的网站，就必须充分了解当前CSS规范各模块的新特性、新技术和新思想。

本书是经典CSS参考指南，自第1版出版至今一直畅销不衰。第3版针对当前浏览器支持度足够好的CSS特性全面改写，着眼于如何为更大、更复杂的网站编写优雅、巧妙、易维护的代码。两位作者均是技术与写作才能俱佳的开发高手，他们将自己对现代CSS实践的深刻理解融入书中，结合大量复杂实现情景，清晰展示了如何利用新技术写出高度灵活、易维护和可扩展的代码，并让这些代码在不同浏览器和不同平台上跑起来。

第1章　基础知识

第2章　添加样式

第3章　可见格式化模型

第4章　网页排版

第5章　漂亮的盒子

第6章　内容布局

第7章　页面布局与网格

第8章　响应式Web设计与CSS

第9章　表单与数据表

第10章　变换、过渡与动画

第11章　高级特效

第12章　品控与流程