这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
单靠CSS 就写出创意十足的设计是很困难的。到目前为止，就创建视觉特效而言，CSS 这门语言还是存在诸多限制。想用CSS 写出Photoshop 般的效果，还差得很远，个别情况下仍需要各种奇奇怪怪的招术助阵。
以前，要绕过种种限制，不得不牺牲简洁性（加入大量元素，只为了展示效果的细节），或者牺牲性能（为了展现视觉效果，页面中放了太多图片及JavaScript）。
今天，我们就来介绍几种能够通过CSS 实现的特效。其中用到的一些CSS 特性还很新，浏览器支持不充分，但也有非常成熟的。很多特性在SVG 中已经存在很多年了，最近才加入到CSS 中。
这些技术能够提升你的设计，就像做菜添加了调味料，平淡无奇的一盘菜也能顿时浓香四溢。使用它们的时候也得小心谨慎，必须考虑渐进式增强。另外也要知道，其中一些技术会有相关的bug。即使在支持它们的浏览器中，它们也通常还并不成熟。
图1 展示了一个页面（一些天体的介绍），其中包含很多视觉特效。就在几年前，要通过CSS 实现这些效果几乎是不可能的。整个页面布局，就算能做出来，也要借助大量图片和额外的HTML 元素。
今天，这些效果已经能够在很多浏览器中通过CSS 来呈现了，即使做不到也能平稳地退化为可用版本。在一个页面上集成大量视觉特效仍须谨慎，因为可能造成性能开销，代价有大有小。
尽管如此，通过CSS 来完成它们仍然有很多好处，因为可以减少不必要的标记，而且维护起来比较容易。此外，随着浏览器支持相应的规范，性能也会越来越好。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图1 使用了很多视觉特效的页面
接下来，我们就以这个“观星指南”页面作为例子，逐个讲解其中涉及的技术点。
大家可能都知道，网页布局基本上都是由矩形构成的，CSS Shapes 是一个新标准，旨在让Web 设计者能使用各种形状。形状元素不仅会影响界面的外观，还会影响页面的内容流。
细说形状
CSS Shapes 包含两组新属性，一组用于设置影响盒子中内容的形状，另一组用于设置影响形状元素周边内容流的形状。在图2 中，我们看到一个被设置为圆形的形状。其中左边的图形展示了外部形状如何影响周边的内容，而右边的图形展示了圆形中的内容如何受到内部形状的影响。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图2 外部形状与内部形状
这两种形状分别由不同级别的CSS Shapes 规范定义。其中shape-outside 属性（在CSS Shapes Level 1 中定义）是唯一相对比较成熟的。本文不涉及shape-inside，因为目前还没有浏览器实现它，也许在不久的将来会有吧。
shape-outside 属性只能应用给浮动元素。这个属性不改变元素自身的外观，只会通过设置形状影响其外部内容流。
在我们例子中的“Moon”部分，通过设置shape-outside: circle();实现了文本流环绕月亮图片的效果（见图3）。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图3 文本围绕月亮图片周围的圆形实现了绕排
在解释形状构造原理之前，先了解一下shape-outside 如何影响布局。图片文件本身的背景是黑色的，如果把这一区块的背景改成其他颜色，我们会看得更清楚（见图4）。图片本身还是方形的，但文本流环绕着其中的圆形。在不支持CSS 形状的浏览器中，文本会像往常一样环绕矩形。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
注意：如图4 所示，文本流只绕排在浮动元素的左侧。只能让形状的一侧影响文本的行盒子。即使形状右侧有空间，文本也不会填进去。
1. 形状函数
前面例子中的shape-outside 属性使用了一个值：circle()。这是一个形状函数，类似的形状函数还有ellipse()、polygon()、inset()。前两个分别用于定义椭圆形和多边形，inset()则表示嵌入在盒子边界内的矩形，也可以指定圆角，算是CSS 2.1 中clip 属性的加强版，只是语法不同而已。
此处圆形和椭圆形的语法，类似于第5 章的放射性渐变的大小及位置的语法：
与渐变函数类似，圆形和椭圆形函数也有合理的默认值。前面月亮图片的circle()函数并未传入参数，而默认的参数是以元素中心为圆心，以最近边为半径。
inset()函数需要传入一组长度值，分别表示到上、右、下、左边的距离，很像margin 和padding 简写。同样，1~3 个值的外边距和内边距简写规则在这里也适用。此外，还可以通过round关键字指定圆角，随后是半径值，与border-radius 属性的类似：
相对复杂一些的是polygon()函数。这个函数接受一系列坐标对，用于在盒子表面指定多个点，坐标相对于盒子的左上角，最终把各个点连接起来就是要创建的形状。在“Planets”部分，我们为土星创建了一个多边形。
创建多边形最简单的一种方式就是使用CSS Shapes Editor 插件，它支持Chrome 和Opera。Chrome 和Opera 都支持CSS Shapes，而且会在检查形状元素时给出预览。这个插件会添加额外的工具，因此既可以通过它看到形状如何影响页面，也可以通过创建并拖动控制点来创建新形状（见图5）。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图5 在Chrome 中通过Shapes Editor 插件绘制的形状
然后就可以把得到的多边形复制粘贴到代码中：
多边形中每个点的坐标以百分比表示，这样可以保证最大的灵活度。当然也可以在这里使用任意长度值，比如像素、em，甚至calc()表达式。
2. 形状图片
基于复杂的图片创建多边形会非常麻烦。好在我们可以直接在图片的源文件上基于透明度来创建形状。比如，可以比照预期的形状新创建一张图片。但土星的图片已经是带透明度的PNG格式了，因此可以直接通过它来生成形状。我们要做的就是把shape-outside 的值由polygon()函数修改为指向该图片的url()函数：
如果在Chrome 开发者工具里检查这张图片，会看到如图6 所示的模样。可以看到，图片的透明度数据被用于生成形状了。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图6 图片透明区域的轮廓被用于生成形状
提示：只通过浏览器打开HTML 文件是不行的，就算浏览器支持CSS Shapes 也不行。必须通过Web 服务器取得这个页面，这样引用的图片才会带有合适的HTTP 首部信息，告诉浏览器该图片与CSS 来自同一个域。这种安全机制是较新的浏览器才有的，是为了防止引用的文件对你的计算机造成危害。
默认情况下，形状轮廓会沿图片完全透明区域的边缘生成，但这个值可以通过shape-imagethreshold 属性来修改。默认值是0.0（完全透明），而较大的值（最大为1.0）意味着较高的不透明度也可以用于生成形状边界。比如，修改土星图片的不透明度阈值为0.9，则半透明的土星环将不再被包含在形状内，结果文本会覆盖其上（见图7）。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图7 使用shape-image-threshold 提高不透明度阈值后，原来图片中半透明的部分在生
3. 形状盒子与边距
除了使用形状函数或图片，还可以使用元素的参照盒子来生成形状。乍一听好像有点不对，毕竟元素盒子都是方形的。不过，形状也能依照圆角生成。
比如，以前面的月亮图片为例，如果我们想改变区块背景的颜色，同时也去掉图片周围的黑色区域（如图11-8 所示），那么可以在图片上使用border-radius 来创建圆形。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图8 给月亮图片应用border-radius
仅有圆角边框还不能生成形状，还得通过shape-outside 属性告诉浏览器，以border-box作为生成形状的依据。
这样外部形状就变成了环绕元素边框盒子的圆形。其他能生成形状的参照盒子还有content-box、padding-box 和margin-box。margin-box 是个例外。因为形状是基于浮动区域的，浮动区域也包含外边距，所以这个关键字是专门为形状定义的，并没有box-sizing: margin-box 这种用法。
对于形状而言，参照盒子为margin-box 时，形状仍然会参照圆角边框，但这样一来就可以像定义常规的外边距一样，给月亮图片周围添加一些边距了。
这样，文本会环绕着弧形的外边距形状排布。如果在Chrome 开发者工具中检查图片，可以看到此时形状的样子，还有原始的外边距（见图9）。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图9 将margin-box 作为形状的参照后，可以为形状设置外边距
如果想给更复杂的土星图片添加外边距，可以使用另一个属性shape-margin，这个属性用于给整个形状添加外边距，与创建形状的方法无关（见图10）。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图10 为土星形状添加shape-margin 属性
CSS 形状虽然可以影响周围文本流，却不允许你修改元素自身的外观。添加圆角边框只是视觉上改变元素形状的一种方式。实际上，通过把元素的部分区域变透明，是可以影响元素自身形状的。
剪切（clipping）使用路径形状定义硬边界，可以基于该边界完全切换元素的可见性。蒙版（masking）不太一样，它用于将元素的某些区域设置为更透明或更不透明。剪切会影响对象的响应区域，而蒙版不会。比如要触发悬停，鼠标必须移到剪切后元素的可见区域。而对于加了蒙版的元素，无论鼠标下面的区域是否可见，只要位于该元素上，都会激活:hover 状态。
一、剪切
剪切最早是在CSS 2.1 中通过clip 属性引入的。但这个属性只能应用给绝对定位的元素，而且只能把这些元素剪切为矩形（使用rect()函数）。没劲！
好在新的clip-path 属性提供了更多选择。它可以使用CSS 形状中的基本形状函数定义如何剪切元素。它还能使用SVG 文档剪切元素，只要通过URL 引用一个<clipPath>元素即可。
下面从使用形状函数定义剪切路径开始。这个特性之前只有Blink 和WebKit 内核的浏览器支持，而且除了不加前缀的属性，还要使用加-webkit-前缀的属性。为简单起见，后面的例子只展示不加前缀的标准属性。
“观星指南”页面中的所有区块都是被剪切过的，因此都有一些向对角线倾斜（见图11）。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图11 页面中的所有区块都被剪切过，因此都有点倾斜
每个区块都有一个stacked 类，其中使用多边形函数指定了剪切路径：
这个多边形没有前面土星的多边形复杂，因此可以稍微深入地讲解一下。多边形中的每一个点都对应着一对空格分隔的值，值对之间以逗号隔开。
先从左上角开始，0 3vw 表示x 轴剪切长度为0，y 轴剪切长度为3vw。这里使用相对视口的单位保证角度以视口大小为参照。接下来的坐标是右上角坐标100% 0。第三个100% calc(100% -3vw)指距右下角3vw，它不能使用百分比表示，因为这个y 轴坐标是从上方开始计算的。最后，左下角的坐标是0 100%。
因为剪切路径只影响元素渲染后的外观，而不会影响页面流，所以剪切后的元素之间会出现透明间隙（见图11-12）。为消除间隙，可以给每个堆叠的区块应用一个负外边距，而且要比3vm稍大一些，好让相邻的区块边缘能彼此重叠。但我们只希望在支持clip-path 的浏览器中应用这个负外边距，这时候正好可以用上@supports 规则。因为这些新的特效只在较新的浏览器中才存在，所以我们可以放心地这么写：
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图12 如果只应用剪切，区块之间会出现间隙
在@supports 规则块中，我们测试了浏览器是否支持最小的多边形（只有一个点）。增加这些保障后，区块就可以完美地对齐了。而在不支持clip-path 的浏览器中，区块也会像平常一样上下相接，不会重叠。
使用SVG
可以使用polygon()、circle()、ellipse()和inset() 函数创建剪切路径，与创建CSS形状一样。对于复杂的形状，建议大家还是使用图片编辑器来创建，然后再将最终的图形作为剪切路径的源。我们在页面导航中使用的形状就是这样生成的，如图13 所示。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图13 导航区中复杂的形状是基于SVG 源实现的剪切
使用图形作为剪切源，需要先使用SVG 创建剪切路径，然后再通过一个URL 引用到形状函数中。首先，要在Illustrator、Sketch 或Inkscape 之类的图形编辑器中创建想要的形状。虽然不那么简单，但还是可行的。
导航区块本身是一个包含页内链接的无序列表：
在此，我们就不涉及导航本身的样式了，大家只要知道这里用到了Flexbox 水平布局导航项目，将它们固定为100 像素见方的方块就够了。
然后，在支持SVG 的图形编辑器（我们用的是Adobe Illustrator）中创建一张图片。图片的大小也是100 像素见方（见图14）。其中的星球由两个黑色的形状构成，一个圆形和一个旋转后的椭圆形。接着把这个图片保存为SVG 格式，命名为clip.svg。保存过程因编辑器而异，这里
就不说了，我们只关注大体的流程。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图14 使用Illustrator 创建的星球图形
下面在代码编辑器中打开生成的SVG 文件，看上去大概是这样的：
为了把这个图片转换为剪切路径，需要把其内容包装在一个<clipPath>元素中，并添加一个ID 属性：
最后，就可以在CSS 中引用clip.svg 中的这个剪切路径了：
这样就可以把多个剪切源保存在一个SVG 文件中，然后通过URL 的片段ID 分别引用。
二、蒙版
“观星指南”页面的标题好像半隐于地球大气层的后面（见图15）。这种透明渐隐效果是通过蒙版实现的。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图15 页面标题“Stargazing”通过蒙版实现了渐隐效果
Safari 早在2008 年就实现了蒙版，使用的是非标准属性-webkit-mask-image。这个属性允许指定一张图片，并以这张图片作为加蒙版元素透明度层次的来源。作为蒙版的图片中，每个像素都有一个阿尔法级别（alpha level），也就是透明度。如果蒙版图片中的像素是透明的，那么加蒙版元素中对应的像素也不可见。相反，蒙版图片中完全不透明的区域，对应的加蒙版元素的区域也会完全可见。蒙版图片的颜色与此无关，因此灰度图常用作蒙版。
除了图片，还可以使用CSS 渐变来创建蒙版。页面标题的蒙版效果就是这么做的：
相信大家都了解这个语法：mask-image 后面的值非常类似background-image 属性的值，甚至也可以声明多个蒙版。
除了指定蒙版图片，还可以指定蒙版的大小和位置。对于我们这个例子而言，为了把蒙版放到文本底部，我们将它的高度声明为两倍，而没有使用定位。如果我们在这里简单地把渐变图片移动到下面，那么蒙版图片的上半部分就会是透明的，结果就是文本的上半部分不可见。图16展示了渐变蒙版的大小和位置，以及它与文本的相对位置关系。
这有几种，你可能还没用过的【CSS高级特效】// 精通CSS
图16 蒙版图片看起来就像是位于文本上方
在WebKit 最初实现的基础上，蒙版相关的属性得以标准化和扩展，同时也支持了对应的SVG效果。没错，就像clip-path 一样，SVG 中的蒙板也可以应用给HTML 内容。
与剪切路径一样，这里也需要使用objectBoundingBox 坐标系，按照0~1 的比例尺将蒙版缩放到与元素边界匹配。SVG 蒙版元素本身还有一个maskContentUnits 属性，这里也将其设置为与蒙版形状相同的坐标系。
SVG 蒙版源使用明度值（luminance）而非阿尔法级别来应用蒙版。这意味着蒙版较暗的区域对应的加蒙版元素区域会较透明，而蒙版较亮的区域对应的加蒙版元素区域会较不透明。在前面SVG 蒙版的例子中，我们使用了黑白渐变。
浏览器会在你使用蒙版图片时使用阿尔法级别，在你使用SVG 蒙版时使用明度值。在对标准的建议中，有一个mask-type 属性可以切换这个应用蒙版的依据值。
另外，-webkit-前缀版与建议的标准版属性之间也有一些差异。可以参考MDN 中WebKit实现的完整属性和语法。
——
本文很大程度上跳出了沉闷单调的页面盒子世界。我们探讨了如何通过CSS 形状美化页面中的元素，以及如何通过剪切路径画出视觉边界。使用蒙版则可以进一步控制界面中元素的可见性。
通过这些特效的学习，我们也看到了SVG 与CSS 结合的威力，也极大扩展了我们未来设计的想象空间。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
css3