【译】CSS Shapes 简介

• 原文地址：An Introduction to CSS Shapes
• 原文做者：Tania Rascia
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：xilihuasi
• 校对者：ElizurHz, Moonliujk

CSS Shapes 简介

CSS Shapes 容许咱们经过定义文本内容能够环绕的几何形状、图像和渐变，来建立有趣且独特的布局。本次教程会教你如何使用它们。

在 CSS Shapes 问世以前，为网页设计文本自由环绕的杂志式布局几乎是不可能的。相反，网页设计布局传统上一直用网格、盒子和直线构造。

CSS Shapes 容许咱们定义文本环绕的几何形状。这些形状能够是圆、椭圆、简单或复杂的多边形，甚至图像和渐变。Shapes 的一些实际设计应用多是圆形头像周围显示圆形环绕文本，全屏背景图片的简单部位上面展现文本，以及在文章中显示首字下沉。

如今 CSS Shapes 已经得到了现代浏览器的普遍支持，值得一看的是它们提供的灵活性和功能，以肯定它们在你的下一个设计项目中是否能派上用场。

注意：截至攥写本文时，CSS Shapes 支持 Firefox、Chrome、Safari 和 Opera，以及 iOS Safari 和 Chrome for Android 等移动浏览器。Shapes 不支持 IE，对 Microsoft Edge 的支持正在考虑中。

CSS Shapes 初探

CSS Shapes 的当前实现是 CSS Shapes Module Level 1，它主要包含 [shape-outside](https://tympanus.net/codrops/css_reference/shape-outside/) 属性。shape-outside 定义了文本环绕的形状。

考虑到有 shape-outside 属性，你可能会想到还有一个相应的 shape-inside 属性，它包含形状内的文本。shape-inside 属性可能会在未来实现，目前它只是 CSS Shapes Module Level 2里面的一个草案，并无被任何浏览器实现。

在本文中，咱们将演示如何使用 数据类型，并使用形状函数值设置它，以及使用半透明 URL 或渐变设置形状。

基本的形状函数

咱们能够经过将下列函数值应用于 shape-outside 属性来定义 CSS 中的各类基本形状：

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

要给元素设定 shape-outside 属性，该元素必须是浮动的而且已设定宽高。让咱们逐个来看四个基本形状，并演示它们的使用方法。

圆

咱们将从 circle() 函数开始。设想以下场景，有一个圆形的做者头像，咱们想让头像左浮动而且做者的描述文本环绕它。仅对头像元素使用 border-radius: 50% 不足以使文本呈圆形；文本仍将把头像当成矩形元素。

经过圆形，咱们能够演示文本如何按圆形环绕。

首先咱们在一个普通的 div 上建立 circle 样式，而且写几段文字。（我使用 Bob Ross 语录做为 Lorem Ipsum 文本。）

<div class="circle"></div>
<p>Example text...</p>
复制代码

在 circle 样式中，咱们设置元素左浮动，设定等值的 height 和 width，而且设置 shape-outside 为 circle()。

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle();
}
复制代码

若是咱们访问页面，会看到以下场景。

如你所见，文本围绕圆形环绕，可是咱们并无看到任何形状。使用开发工具审查元素，咱们能够看到已经设置好的实际形状。

此时，你可能会认为，给元素 background 设置颜色或者图片就能看到形状了。咱们来试一下。

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle();
  background: linear-gradient(to top right, #FDB171, #FD987D);
}
复制代码

不幸的是，给 circle 设置 background 后会显示一个矩形，这是咱们一直试图避免的事情。

咱们能够清晰地看到文本在它周围环绕，但元素自己没有形状。若是咱们想要真实地显示形状函数，须要使用 clip-path 属性。clip-path 采用许多和 shape-outside 相同的值，所以咱们能够给它一样的 circle() 值。

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle();
  clip-path: circle();
  background: linear-gradient(to top right, #FDB171, #FD987D);
}
复制代码

在本文剩下的部分，我将使用 clip-path 帮助咱们辨认形状。

circle() 函数接收可选的 radius 参数。在本例中，默认 radius 是 50% 或者 100px。使用 circle(50%) 或者 circle(100px) 都将产生和咱们已经完成样例的一样结果。

你可能注意到文本恰好和形状贴合。咱们可使用 shape-margin 属性给形状添加 margin，单位能够是 px、em、% 和其余标准的 CSS 测量单位。

.circle {
  float: left;
  height: 200px;
  width: 200px;
  shape-outside: circle(25%);
  shape-margin: 1rem;
  clip-path: circle(25%);
  background: linear-gradient(to top right, #FDB171, #FD987D);
}
复制代码

这里有个 circle radius 设置 25% 而且使用 shape-margin 的例子。

除了 radius，形状函数可使用 at 定位。默认位置是圆心，所以 circle() 也能够被显式设置为 circle(50% at 50% 50%) 或 circle(100px at 100px 100px)，两个值分别是水平和垂直位置。

为了搞清楚 position 的做用，咱们能够设置水平位置值为 0 来创造一个完美的半圆。

circle(50% at 0 50%);
复制代码

该坐标定位系统称为引用框。

稍后，咱们将学习如何使用图像代替形状或者渐变。如今，咱们将继续进行下一个形状函数。

椭圆

ellipse() 和 circle() 函数相似，只是它会创造椭圆。为了演示，咱们建立一个 ellipse 元素和样式。

<div class="ellipse"></div>
<p>Example text...</p>
复制代码

.ellipse {
  float: left;
  shape-outside: ellipse();
  clip-path: ellipse();
  width: 150px;
  height: 300px;
  background: linear-gradient(to top right, #F17BB7, #AD84E3);
}
复制代码

此次，咱们设置不一样的 height 和 width 建立一个垂直拉长的椭圆。

ellipse() 和 circle() 的区别在于椭圆有两个半径 —— _r_x 和 _r_y，或者 X 轴半径和 Y 轴半径。所以，上面的例子也能够写成：

ellipse(75px 150px);
复制代码

circles 和 ellipses 的位置参数是同样的。除了是测量单位，半径也包括 farthest-side 和 closest-side 的选项。

closest-side 表明引用框的中心到最近侧的长度，相反，farthest-side 表明引用框中心到最远侧的长度。这意味着若是未设置默认值之外的位置，则这两个值无效。

这里演示了在 ellipse() 上翻转 closest-side 和 farthest-side 的区别，它的 X 和 Y 轴的偏移量是 25%。

ellipse(farthest-side closest-side at 25% 25%)
复制代码

ellipse(farthest-side closest-side at 25% 25%)
复制代码

内嵌

目前为止咱们只处理了圆形，可是咱们可使用 inset() 函数定义内嵌矩形。

<div class="inset"></div>
<p>Example text...</p>
复制代码

.inset {
  float: left;
  shape-outside: inset(75px);
  clip-path: inset(75px);
  width: 300px;
  height: 300px;
  background: linear-gradient(#58C2ED, #1B85DC);
}
复制代码

在本例中，咱们创造了一个 300px 的正方形，每条边内嵌 75px。这将给咱们留下 150px 周围有 75px 空间。

咱们能够看到矩形是内嵌的，文本忽略了内嵌区域。

inset() 形状也可使用 round 参数接收 border-radius，而且文本会识别圆角，就像本例中全部边都是 25px 内嵌和 75px 圆角。

inset(25px round 75px)
复制代码

像 padding 或 margin 简写，inset 值以顺时针方式（inset(25px 25px 25px 25px)）接收 top right bottom left，而且只传一个值将使四条边都相同（inset(25px)）。

多边形

形状函数最有趣和灵活的是 polygon()，它能够采用一系列 x 和 y 点来制做任何复杂形状。数组里的每一个元素表明 _x_i _y_i，将被写成 polygon(x1 y1, x2 y2, x3 y3...) 等等。

咱们能够为多边形设置的点集数量最少为 3，这将建立一个三角形。

<div class="polygon"></div>
<p>Example text...</p>
复制代码

.polygon {
  float: left;
  shape-outside: polygon(0 0, 0 300px, 200px 300px);
  clip-path: polygon(0 0, 0 300px, 200px 300px);
  height: 300px;
  width: 300px;
  background: linear-gradient(to top right, #86F7CC, #67D7F5);
}
复制代码

在这个形状中，第一个点是 0 0，div 中最左上角的点。第二个点是 0 300px，它是 div 中最左下角的点。第三个也就是最后一个点是 200px 300px，它在 X 轴的 2/3 处而且也在底部。最终的形状是这样：

polygon() 形状函数的一个有趣用法是文本内容能够在两个或以上形状中环绕。由于 polygon() 形状是如此灵活和动态，这给咱们制做真正独特的杂志式布局提供了一个最好机会。在本例中，咱们将把文本放在两个多边形中。

<div class="left"></div>
<div class="right"></div>
<p>Example text...</p>
复制代码

.left {
  float: left;
  shape-outside: polygon(0 0, 0 300px, 200px 300px);
  clip-path: polygon(0 0, 0 300px, 200px 300px);
  background: linear-gradient(to top right, #67D7F5, #86F7CC);
  height: 300px;
  width: 300px;
}

.right {
  float: right;
  shape-outside: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
  clip-path: polygon(200px 300px, 300px 300px, 300px 0, 0 0);
  background: linear-gradient(to bottom left, #67D7F5, #86F7CC);
  height: 300px;
  width: 300px;
}
复制代码

显然，想要手动创造你本身的复杂形状是很是困难的。幸运的是，你能够用一些工具来建立多边形。Firefox 有一个内置的形状编辑器，你能够在 Inspector 中经过点击多边形使用。

目前，Chrome 有一些你可使用的扩展程序，好比 CSS Shapes Editor。

多边形能够用来剪切图像或其余元素周围的形状。在另外一个例子中，咱们能够经过在大字母周围绘制多边形来建立首字下沉。

<div class="letter">R</div>
<p>Example text...</p>
复制代码

.letter {
  float: left;
  font-size: 400px;
  font-family: Georgia;
  line-height: .8;
  margin-top: 20px;
  margin-right: 20px;
  shape-outside: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px) content-box;
  clip-path: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px);
}
复制代码

URLs

CSS Shapes 一个使人激动的特性是你没必要每次都经过形状函数明肯定义；你也可使用半透明图像的 url 来定义形状，这样文本就会自动环绕它。

重要的是要注意图像使用必需要兼容 CORS，不然你将会遇到以下错误。

Access to image at 'file:///users/tania/star.png' from origin 'null' 
has been blocked by CORS policy: The response is invalid.
复制代码

在同一个服务器上提供图像将会保证你不会遇到上面的错误。

与其余例子不一样，咱们将使用 img 代替 div。此次的 CSS 很简单——只用把 url() 放进 shape-outside 属性，就像 background-image 同样。

<img src="./star.png" class="star">
<p>Example text...</p>
复制代码

.star {
  float: left;
  height: 350px;
  width: 350px;
  shape-outside: url('./star.png')
}
复制代码

由于我使用了透明背景的星星图像，文本知道哪些区域是透明的哪些是不透明的，并进行自适应布局。

渐变

最后，渐变也能够用来当成形状。渐变和图像同样，就像咱们上面用到的图像例子，文本也将知道在透明部分环绕。

咱们将使用渐变的一个新属性 —— shape-image-threshold。shape-image-threshold 定义形状的 alpha 通道阈值，或者图像透明的百分比值。

咱们将制做一个渐变例子，它是 50％/50％ 的颜色和透明分割，而且设置 shape-image-threshold 为 .5，意味着超过 50％ 不透明的全部像素都应被视为图像的一部分。

<div class="gradient"></div>
<p>Example text...</p>
复制代码

.gradient {
  float: left;
  height: 300px;
  width: 100%;
  background: linear-gradient(to bottom right, #86F7CC, transparent);
  shape-outside: linear-gradient(to bottom right, #86F7CC, transparent);
  shape-image-threshold: .5;
}
复制代码

咱们能够看到渐变在不透明和透明的中心对角线完美分割。

结语

在本文中，咱们学习了 CSS Shapes 的三个属性 shape-outside、shape-margin 和 shape-image-threshold。咱们也了解到如何使用函数值建立可供文本环绕的圆、椭圆、内嵌矩形以及复杂的多边形，而且演示了形状如何检测图像和渐变的透明部分。

你能够在以下 demo 中找到本文中用到的全部例子，也能够下载源文件。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。