此页面由 Cloud Translation API 翻译。

CSS 形状使用入门

将内容封装在自定义路径周围

Razvan Caliman

长期以来，网页设计人员一直被迫在矩形的约束范围内进行创作。网络上的大多数内容仍被困在简单的方框中，因为大多数创意采用非矩形布局最终会令人沮丧。随着 CSS 形状（从 Chrome 37 开始提供）的引入，这种情况即将发生变化。借助 CSS 形状，网页设计人员可以将内容封装在自定义路径（例如圆形、椭圆形和多边形）周围，从而摆脱矩形的约束条件。

形状可以手动定义，也可以根据图像推断得出。

我们来看一个非常简单的示例。

也许您和我一样，像我一样天真地浮现了带有透明部分的图片，期望内容能够包围并填补间隙，结果只是因为元素周围的矩形包围形状而令您感到失望。CSS 形状可用于解决此问题。

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

shape-outside: url(image.png) CSS 声明会告知浏览器从图片中提取形状。

shape-image-threshold 属性定义将用于创建形状的像素的最低不透明度。其值必须介于 0.0（完全透明）到 1.0（完全不透明）之间。因此，shape-image-threshold: 0.5 表示仅使用不透明度不低于 50% 的像素来创建形状。

float 属性在此是关键所在。虽然 shape-outside 属性定义了内容环绕区域的形状，如果没有浮点数，您将看不到形状的效果。

元素的 float 值在另一侧有一个浮动区域。例如，如果某个元素带有咖啡杯图片，让系统向左悬浮，则会在杯子的右侧创建浮动区域。尽管您可以设计出两侧有间隙的图像，但内容只会环绕在浮动属性指定的对面的形状上，即左侧或右侧，而绝不能两者并用。

将来，可以使用 CSS 排除功能对非浮动元素使用 shape-outside。

手动创建形状

除了从图像中提取形状之外，您还可以手动对图像进行编码。您可从以下几个函数值中进行选择以创建形状：circle()、ellipse()、inset() 和 polygon()。每个形状函数都接受一组坐标，并将其与建立坐标系的参考框配对。我们稍后会详细介绍参考框。

Circle() 函数

圆形值的完整表示法为 circle(r at cx cy)，其中 r 是圆形的半径，而 cx 和 cy 是圆形中心在 X 轴和 Y 轴上的坐标。圆心的坐标为可选。如果省略这些元素，则系统会默认使用元素的中心（对角线的交点）。

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

在上例中，内容会环绕在环形路径的外侧。单个参数 50% 可指定圆形的半径，在此特定情况下，半径为元素宽度或高度的一半。更改元素的尺寸会影响圆形的半径。这是一个基本示例，展示了 CSS 形状如何实现自适应。

在继续深入介绍之前，我先提一点：请务必注意，CSS 形状只会影响元素周围的浮动区域的形状。如果元素有背景，则形状不会裁剪背景。要实现该效果，您必须使用 CSS 遮罩中的属性：clip-path 或 mask-image。clip-path 属性非常实用，因为它遵循与 CSS 形状相同的表示法，因此您可以重复使用值。

本文档中的插图使用裁剪来突出显示形状，并帮助您了解其效果。

回到圆形。

使用百分比形式的圆半径时，实际会使用稍微复杂一些的公式计算该值：sqrt(width^2 + height^2) / sqrt(2)。了解这一点很有用，因为这可以帮助您想象如果元素的尺寸不相等，生成的圆形会是什么形状。

所有 CSS 单位类型都可以在形状函数坐标中使用，例如 px、em、rem、vw、vh 等。您可以根据自己的需求选择有弹性或刚性合适的接头。

您可以为圆形的中心坐标设置明确的值，从而调整其位置。

.element{
  shape-outside: circle(50% at 0 0);
}

这会将圆形中心放置在坐标系的原点处。坐标系是什么？我们在其中引入参考框。

CSS 形状参考框

参考框是元素周围的虚拟框，确立了用于绘制和定位形状的坐标系。坐标系的原点位于左上角，X 轴指向右侧，Y 轴向下。

请注意，shape-outside 会改变将内容封装的浮动区域的形状。浮动区域扩展到由 margin 属性定义的框的外边缘。这称为 margin-box，如果未明确提及形状，则它是形状的默认参考框。

以下两个 CSS 声明的结果相同：

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

我们尚未在元素上设置外边距。此时，可以放心地假定坐标系的原点和圆形中心位于元素内容区域的左上角。设置外边距后，这会发生变化：

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

现在，坐标系的原点位于元素内容区域之外（向上 100 像素，向左 100 像素），圆圈中心也是如此。考虑到 margin-box 参考框建立的坐标系表面增大，圆形半径的计算值也会增大。

CSS 形状使用入门

手动创建形状

Circle() 函数

CSS 形状参考框

ellipse() 函数

Polygon() 函数

inset() 函数

根据参考框创建形状

形状边距

为形状添加动画效果

将内容封装在形状中

渐进增强

与 CSS 排除对象的歧义

用于处理 CSS 形状的工具

总结