此页面由 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 值的另一侧有一个浮动区域。例如，如果带有咖啡杯图片的元素悬浮左侧，则系统会在咖啡杯右侧创建浮动区域。尽管您可以设计两边都有间隙的图片，但内容只会在 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 形状的工具

总结