html打开特效这有几种你可能还没用过的CSS高等特效// 精晓CSS

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

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

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

html打开特效这有几种你可能还没用过的CSS高等特效// 精晓CSS SQL

这些技能能够提升你的设计，就像做菜添加了调味料，平淡无奇的一盘菜也能顿时浓喷鼻香四溢。
利用它们的时候也适合心谨慎，必须考虑渐进式增强。
其余也要知道，个中一些技能会有干系的bug。
纵然在支持它们的浏览器中，它们也常日还并不成熟。

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

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

只管如此，通过CSS 来完成它们仍旧有很多好处，由于可以减少不必要的标记，而且掩护起来比较随意马虎。
此外，随着浏览器支持相应的规范，性能也会越来越好。

图1 利用了很多视觉殊效的页面

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

CSS Shapes

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

细说形状

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

图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();}

图3 文本环绕玉轮图片周围的圆形实现了绕排

在阐明形状布局事理之前，先理解一下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）。

图5 在Chrome 中通过Shapes Editor 插件绘制的形状

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

.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 所示的样子容貌。
可以看到，图片的透明度数据被用于天生形状了。

图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;}

图7 利用shape-image-threshold 提高不透明度阈值后，原来图片中半透明的部分在生

3. 形状盒子与边距

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

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

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

图8 给玉轮图片运用border-radius

仅有圆角边框还不能天生形状，还得通过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）。

图9 将margin-box 作为形状的参照后，可以为形状设置外边距

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

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

图10 为土星形状添加shape-margin 属性

剪切与蒙版

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

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

一、剪切

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

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

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

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

图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; }}

图12 如果只运用剪切，区块之间会涌现间隙

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

利用SVG

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

图13 导航区中繁芜的形状是基于SVG 源实现的剪切

利用图形作为剪切源，须要先利用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。
保存过程因编辑器而异，这里

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

图14 利用Illustrator 创建的星球图形

下面在代码编辑器中打开天生的SVG 文件，看上客岁夜概是这样的：

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

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

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

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

二、蒙版

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

图15 页面标题“Stargazing”通过蒙版实现了渐隐效果

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展示了渐变蒙版的大小和位置，以及它与文本的相对位置关系。

图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脱销经典全面升级

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

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

第1章　根本知识

第2章　添加样式

第3章　可见格式化模型

第4章　网页排版

第5章　俊秀的盒子

第6章　内容布局

第7章　页面布局与网格

第8章　相应式Web设计与CSS

第9章　表单与数据表

第10章　变换、过渡与动画

第11章　高等殊效

第12章　品控与流程