[译]《Smashing》: 用 CSS 形状打造高级排版

原文： Take A New Look At CSS Shapes

作者： Rachel Andrew 发表时间 ：september 4, 2018

译者：西楼听雨 发表时间： 2018/9/16

( 转载请注明出处 )

摘要：在本文中，我们将对 CSS 形状的概念，以及如何用图片、渐变和基础形状来创建非矩形类的形状做一个讲解。另外我们还会讲到 Firefox 的新 工具 是如何让我们编辑形状变得简单的。

CSS 形状第一阶段规范已经在 Chrome 和 Safari 中实现了有好几年了，而随着 Firefox 62 在本周发布，Firefox 也已经在生产版本中支持了——另外随之发布的还有一个很棒的开发者工具功能，它对我们使用形状可以带来帮助。在本文中，我们将看下一你可以用 CSS 形状做哪些事情。也许是时候考虑给我们的设计添加上一些曲线效果了！

什么是 CSS 形状（CSS Shapes）？

The CSS Shapes specification Level 1 defines three new properties:

CSS 形状规范的第一阶段 (CSS Shapes Level 1) 定义了三个新的属性：

shape-outside
shape-image-threshold
shape-margin

这个规范的制定，目的是为了让内容的排布可以支持环绕着非矩形类形状进行，即那些和我们 Web 的盒子模型极大不同的形状。创建形状有多种方式，我们会在这篇教程中讲到。另外我们还会对 Shape Path Editor ——可在 Firefox 中找到——做一下介绍，因为它可以帮助我们理解和使用形状。

在当前版本的规范中，规定了形状只能被应用在浮动元素上。在下面的这个例子中，我放了一张背景透明的 PNG 图片，并将其浮动到左边。其后的文本随之排布在了其右侧和底部。

在这例子中，我真正希望的结果是，我的内容可以围绕图片中非透明部分的形状进行排布，而不是这个图片文件的物理边线。所以，为了实现这种效果，我使用的是 shape-outside 属性，并把这个图片的 URL 作为其值。这里我使用的就是图片文件来为我的内容创建环绕路径的。

注意，你的图片须兼容 CORS，所以需要把图片放在和你内容相同的服务器下，或者假如放在 CDN 上的话，需要确保响应正确的 HTTP 头部。如果你的图片因为 CORS 被屏蔽了，可以在浏览器的开发者工具中看到。

(译注：CORS，全称 Cross-Origin Resource Sharing；跨源性资源共享。这里的”图片“指的是 shape-outside 属性中的 URL，而不是指 img 标签——它是无需兼容 CORS 的 )

这种创建形状的方法，使用的是图片的 alpha 通道。因为我们这张图片里的形状之外都是完全透明的区域，所以我们只需把它 URL 给到 shape-outside 属性，即可实现将非透明区域的边线所形成的路径作为形状。

设置外边距

为了将文本从图片上推开，我们可以使用 shape-margin 属性，它可以在形状及其周围的内容之间设置一个边界。

利用伪类充当形状载体 (Using Generated Content For Our Shape)

上面的例子中，我们将图片展示在页面中，并使得文本环绕着它弯曲。其实，你也可以做到在不展示那张图片的情况的同时使用那张图片的形状作为环绕路径来获得同样的效果。不过要做到这种效果，我们仍然需要有一个浮动的元素，为此，我们可以用生成的内容 (Generated Content；[译注] 这里指伪类) 来充当。

在这个例子中，我们通过插入生成的内容，并将其浮动到左侧，给其设置宽度和高度，然后使用之前的图片作为 shape-outside 。这样我们就达到了在没有可见的图片的情况下，仍然获得曲线性地围绕空白区域的效果。

使用渐变作为形状

CSS 渐变就相当于一张图片，也就是说我们可以用其来创建形状，这样我们就可以制作出一些有趣的特效。在下面这个例子中，我创建了一个蓝色到透明的渐变（要使用形状，需要有一定的透明区域或半透明区域）。这次我同样使用了生成的内容作为渐变的载体和 shap-outside 的值。

在渐变过度到全透明的地方，就会形成形状，也是内容所环绕的边界。

使用 shape-image-threshold 来支持环绕半透明图片

到这里为止，我们已经看到了如何使用图片或渐变的全透明部分来创建形状。其实，CSS 形状规范中定义的这第三个属性可以让我们通过设置一个透明度阈值来使用图片或渐变的半透明部分创建形状。这个属性的值为 1 时，表示完全不透明；值为 0 时，表示全透明。

要观察它的效果，前一个例子中的渐变就是一个很好的对象，我们可以改变其 shape-image-threshold 属性的值来使文本落在更加不透明的区域或更加透明的区域中的位置。对于有 alpha 通道的非全透明的图片，这个属性的效果完全一样。

上面这些创建形状的方法，在我看来，是最直接的。你可以通过先在图像处理类软件中按照你的需要创建任意复杂的形状，然后在页面中进行使用。其实我是想说还有另一种方式创建形状，那就是使用基础形状 (Basic Shapes) 。

用基础形状创建 CSS 形状

“基础形状”是一系列预定义的形状，它包含了许多你可能想要创建的各类形状。使用基础形状时，我们使用的是基础形状的类型作为 shape-outside 的值。这种类型使用函数形式来表示的，所以他们的名字的尾部会有一对括号 (括号里面是一些关于我们所需的形状的值) 。

The options that you have are the following:

你可以使用的形状类型有以下这些：

inset()
circle()
ellipse()
polygon()

在下面的例子中，我创建是最简单的形状之一：一个圆，使用的是 shape-outside: circle(50%) 。这次我还是使用生成的内容，并给了这个 box 一个背景色，还设置了一个外边距、边框和内边距，以此来着重展示使用 CSS 形状的一些概念。在这个例子中，你可以看到，这个圆居中在这个 box 中；这是因为我给了这个圆一个 50% 的值。这个值的定义为 <shape-radius> （译注：形状的半径），它可以是一个长度值，也可以是一个百分比。

现在就是我们用 Firefox 的 Shape Path Editor 来查看一下这个形状的好时机。点击生成的内容，然后点击其 shape-outside 属性旁的图标，就可以形状高亮显示出来。

你可以看到，这个圆的范围触及到了外边距的外边缘上，这是因为我们的形状默认使用的参照盒子 (reference box) 是 margin-box 。如果你之前有添加过 box-sizing: border-box ，你其实就已经知道什么是参考盒子，当你添加这个属性时，就是在告诉 CSS 要使用 border-box 而不是默认的 content-box 作为元素的尺寸。在形状的使用中，我们同样可以调整其所使用的参考盒子。在任意基础形状之后，加上 border-box 表示使用边框来定义形状，加上 content-box 则使用内容区域 (在 padding 之内) 的边缘的来定义。例如：

.content::before {
    content: "";
    width: 150px;
    height: 150px;
    margin: 20px;
    padding: 20px;
    border: 10px solid #FC466B;
    background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%);
    float: left;
    circle(50%) content-box;
}
复制代码

You will see the circle appear to become much smaller. It is now using the width of the content — in this case the width of the box at 150px — rather than the margin box which includes the padding, border, and margin.

这样，你就会发现这个圆看上去严重缩小了，它现在使用的是内容区域的宽度——本例中为 150px ——而不是包含了内边距、边框和外边距的 margin-box。

Inspecting your element in Firefox DevTools will also show you the reference boxes so you can choose which might give you the best result with your particular shape.

在 Firefox 的开发者工具中对这个元素进行审视 (inspecting) ，会展示出它的各类参考盒子，据此你可以选择出特定形状下效果最好的那个。

circle() 的位置值

circle() 中的第二个值表示的是位置，如果你不指定的话，默认为 center 。你可以利用这个值来任意调整你的圆所在的位置。在接下来的例子中，我使用 shape-outside(50% at 30%) (译注：这明显是原文的笔误，正确的是 circle(50% at 30%) ) 来设置这个圆的位置，它调整的是这个圆的中心点所处的位置。

clip-path

一个有用的知识是，基础形状同样可以使用在 clip-path 上；也就是说在创建了一个形状值后，你可以把超出了形状之外的图片和背景颜色部分剪掉。在下面这个例子中，我将用我们的渐变背景的例子来展示，我们会得到一个围绕着弯曲了的文本的圆。

All of the above concepts can be applied to our other basic shapes. Now let’s have a quick look at how they work.

本段讲的这些，对我们的其他基础形状同样适用。现在让我们来看下一他们是如何使用的。

INSET()

inset() 值定义的是一个矩形。这看上去好像没什么用，因为浮动元素本身就是矩形；其实它的真正的涵义是你可以将文本内敛 (inset) 进来。它接收四个参数，分别为顶部、右侧，底部和左侧，再加一个圆角半径值。

在下面这个例子中，我使用 shape-outside: inset(0 30px 100px 0 round 40px) 来将内容从右侧和底部内敛进来，在加上一个圆角半径。现在，你可以看到这些内容将如何覆盖到盒子的背景颜色上：

ELLIPSE()

椭圆就是被压扁了的圆，所以我们需要有两个半径：x 和 y (创建时顺序与此一致) 来创建，也同样也可以像圆一样通过位置值来任意调整位置。在下面这个例子中，我创建了一个椭圆并把相同的值使用在 clip-path 属性上。

In the above example, I also used shape-margin to demonstrate how we can use this property as with our image generated shapes to push the content away.

在这个例子中，我还使用了 shape-margin 属性，为的是演示如何配合使用这个属性，将内容推开一定距离。

POLYGON()

多边形形状的创建可以让我们拥有最大的灵活性，因为我们的形状可以用三个以上的点来创建。传递到多边形中的值需要至少3对表示坐标的值。

这个时候 Firefox 就变得非常有用了，因为他可以帮助我们创建多边形。下面这个例子中，我创建了一个由四个点组成的多边形，在 Firefox 的开发者工具中，你可以在任意一条边上双击来添加一个新的点，再次双击可以移出这个点。在你创建出了让你满意的多边形后，你就可以将其从开发者工具中拷贝出来用到你的 CSS 中。

兼容性问题 (FALLBACKS)

因为 CSS 形状是应用在浮动元素上的，所以在大多数情况下出现兼容性问题时，我们看的将会是内容围绕着浮动元素 (就和一般情况下的一样)，而不是围绕着形状排布。浏览器会把他所不支持的属性忽略掉，所以如果它们不支持形状，把 shape-outside 属性放上去也不会有什么影响。

你真正需要考虑的问题是，在不支持形状的情况下，会使得内容难以阅读的内容排布情形。通常我们使用形状，都会把内容隔开一定距离。在这种情形下，你应该首先确保那些不支持形状的用户，然后再使用特性查询（Feature Query）来检查 shape-outside 的支持情况，并进行 CSS 覆盖和应用形状。例如，你可以为不支持形状的用户设置一个外边距，以此将内容推开；然后在特性查询中将这个外边距移除。

.content {
    margin-left: 120px;
}

@supports (shape-outside: circle()) {
    .content {
        margin-left: 0;
        /* add the rest of your shapes CSS here */
    }

}
复制代码

随着 Firefox 发布了对形状的支持，现在剩下唯一还不支持形状的主流浏览器就是 Edge 了。如果你希望看到形状广受支持，你可以前往这里为这个特性投一票。

更多关于 CSS 形状的信息

在本文中，我试着对 CSS 形状可能的用途做了一个。关于每个特性的更详细信息，可以查看 MDN 上的Guides to CSS Shapes (CSS 形状指导)。另外还可以查看 guide to the Shape Path Editor in Firefox (Firefox 的 Shape Path Editor 使用指导) 。