此页面由 Cloud Translation API 翻译。

CSS 形状使用入门

将内容封装在自定义路径中

Razvan Caliman

长久以来，Web 设计师一直被迫在矩形的约束下进行创作。由于大多数尝试采用非矩形布局的广告素材最终都以失败告终，因此网络上的大多数内容仍局限于简单的框架。随着 CSS Shapes 的引入，这种情况即将改变。CSS Shapes 从 Chrome 37 开始提供。借助 CSS 形状，Web 设计师可以将内容换行到自定义路径（例如圆形、椭圆形和多边形）中，从而摆脱矩形的约束。

形状可以手动定义，也可以从图片中推断出来。

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

也许您和我一样，在首次浮动包含透明部分的图片时，希望内容能够换行并填充空白，但最终却发现元素周围仍然存在矩形换行形状，这让您感到失望。您可以使用 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 形状的工具

总结