[CSS] Introducing the CSS clip-path Property（译）_html/css_WEB-ITnose

原文地址：https://www.sitepoint.com/introducing-css-clip-path-property/

网页主要是矩形分布的。另一方面，平面媒体则倾向于更多不同的形状。造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容。

这个教程会介绍 clip-path这个属性，允许你部分展示元素。该元素的可见区域是由你提供的值决定的。我们先从基本的开始，然后再介绍语法和跟高级的概念。

基础部分

裁剪就是从某样东西修剪一块。在我们的例子中，它是一个操作，允许我们完全或者部分隐藏网页上的元素。另外两个在文章中用到的和裁剪相关的概念是 clipping path和 clipping region。

Clipping path 是我们用来裁剪元素的路径，它标记了我们的裁剪区域。它可以是个简单的形状也可以是一个复杂的多边形。裁剪区域即裁剪路径闭合后所包含的全部区域。

裁剪区域外的元素都由浏览器来裁剪。这些元素不仅仅包括背景和内容，也包括边框和文字阴影以及其他的。此外，浏览器不会捕获因 hover或者 click产生的在元素裁剪区域外的事件。

尽管我们的特定元素是非矩形的，但是在这个特定元素周围的元素还是保持在特定元素为初始形状的元素流位置。要使周围的元素流根据裁剪元素的形状排列，你需要使用 shape-outside属性。你可以参考 SitePoint tutorial的详细介绍。

同时，请注意不要把这个属性和已经废弃的的 属性 clip 混淆， clip使用上非常严格并且只支持裁剪为矩形。

语法和使用

该属性正确的语法应该如下

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none 

上面的属性值具体含义

• clip-source会通过 URL 引用内部的活着外部 SVG 元素。

• basic-shape接受CSS Shapes specification中定义的基本形状函数。

• geometry-box是一个可选属性，当你在使用基本形状函数的时候使用这个属性，他表现的就像一个通过 basic-shape进行裁剪的reference box。如果 geometry-box单独使用，那么他会使用指定元素的形状，包括圆角形状（通过 border-radius属性设置）。我们将会展开讨论这个属性。

现在，考虑下面使用了基本形状函数的CSS代码

img {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);} 

它会把图像剪辑为菱形。但是为什么这些图像会被剪辑为菱形而不是梯形或者平行四边形呢？这取决于你设置值的顶点。接下来的图像解释了当你裁剪多边形时的常见配置。

每个点上的第一个坐标决定了它在x轴上的位置。同样的，每个点上的第二个坐标决定了y轴的位置。每个点都按顺时间方向描绘。考虑我们菱形最右边的点。它位于y轴的一半所以它的y坐标是50%。同样的它最右边的点位于x轴上，所以他的坐标点是100%。其它点也可以根据此例子判断出坐标点。

使用 geometry-box值裁剪元素

当你裁剪一个HTML元素的时候， geometry-box（或者reference box）值可以是下列元素之一 – margin-box， border-box， padding-box或者 content-box。 geometry-box值的使用方式应该像下面一样

.clip-me {  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;  margin: 10%;}： 

在上面的案例中，我们元素中的 margin-box将被用为参考并决定裁剪点的实际坐标。点 (10%, 10%)在我们的 margin-box中位于左上角因此我们的裁剪路径将会定位于相关的点。

在 SVG 元素的情况下，它可能是 fill-box， stroke-box和 view-box。如果没有 view-box被指定的话， view-box这个值会被用于最接近 SVG 视图窗口的引用。

使用 clip-path

这个属性有很多有趣的用途。首先,它可以改善文本内容区域。看看下面的图片。标题和第二个段落的背景都是通过 clip-path属性创建的。

通过 gradients 和其他类似的技术你可以很容易的创建出第一个背景。但是，没有 clip-path帮助的情况下创建第二个背景图会很困难。注意那张像信息图标的背景图底部的线并不是完全水平的，它有点倾斜。使用 clip-path的话你可以通过一行 CSS 代码就能实现这个效果：

.p-msg {  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);} 

背景有七个顶点并且一一反应在 polygon’s 的 clip-path上。你问我是怎么想出这些坐标的？我会让你自己去尝试，这样做会帮助你对概念有一个更透彻的理解。通过以下这个练习来尝试吧！

通过这个属性你也可以把图片裁剪为不同的形状。然后在CSS的帮助下把他们组合为一个很酷的形状。你相册中的缩略图可以不再以矩形的方式存在并且用户图像也可以设置为任何你想要的形状。在这个教程中，我们会把图片展示为菱形。因为所有的图片都有着菱形的基础所以他们会用到相同的 clip-path值。下面是最右边图片的 CSS 代码

.right {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  position: relative;  top: -352px;  left: 256px;} 

下面就是一个图片使用 clip-path的例子

通过 clip-path你还能做到很多东西-你可以创建任何形状的按钮或者给你的菜单增加漂亮的悬浮效果。没有想不到只有做不到！

增加动画

这个属性也可以添加动画效果。唯一需要记住的是图片初始形状和裁剪形状的顶点数必须相同。这是有原因的，否则浏览器不知道在哪里添加额外的顶点（或者删除它）。下面是一个关于梯形动画的 CSS 代码

@keyframes polygons {   25% {     clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);   }   50% {     clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);   }   70% {     clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);   } } 

浏览器支持

这个属性不被 IE 和 Edge 支持。Firefox 只部支持 clip-path（只支持 url() 语法）。但是从版本号 47 之后，通过设置 layout.css.clip-path-shapes.enabled为 enabled，Firefox 也支持这个属性。

Chrome, Safari and Opera 需要添加 prefix-webkit-前缀才能正确生效。不幸的是，它们也不支持外部 SVGs 引用的形状。你可以在 Can I Use 上查看浏览器的支持情况。

结论

本教程介绍了基本的 clip-path帮助你了解它。虽然并没有花费很多时间去学习如何使用这个属性，想要创造性的使用它还需要足够的联系。等到浏览器能够很好支持它的时候，你准备好使用 clip-path创造出令人惊艳的效果了吗？

我还想介绍两个工具 – Bennett Feely 开发的 clippy和 CSS Plant 开发的 clip path generator。这些工具方便你创建复杂的多边形路径。

如果你也使用 clip-path创建了精彩的东西，欢迎你在评论中留言。