形状概述

该 CSS Shapes 模块 描述了 CSS 中的几何形状。本文概述了如何使用形状将文本包裹在不一定为矩形的浮动元素周围。

当您将项目向左浮动时，文本将以矩形方式包裹在项目右侧和底部。使用 CSS 形状，您可以例如应用圆形形状，文本将包裹在圆形的线周围。

有几种方法可以创建此圆形。在本指南中，我们将了解 CSS Shapes 的工作原理以及如何使用它们。

规范定义了什么？

规范定义了一些属性，包括

  • shape-outside — 允许定义基本形状。
  • shape-image-threshold — 设置不透明度阈值。如果使用图像来定义形状，则仅使用图像中不透明度与阈值相同或大于阈值的那些部分。任何其他部分将被忽略。
  • shape-margin — 在定义的形状周围设置边距。

定义基本形状

shape-outside 属性允许我们定义形状。它接受各种值来定义在 <basic-shape> 数据类型中指定的不同形状。

在以下示例中，图像被浮动到左侧。我们将 shape-outside 属性应用于 circle(50%) 值。结果是，内容现在围绕圆形形状弯曲，而不是遵循图像框创建的矩形。

在这里，我们使用了 circle() 函数，该函数在所有现代浏览器中都受支持。如果我们使用不支持的较新形状类型，则不支持的浏览器的用户将看到内容围绕矩形的侧面流动，因为图像被浮动。形状是一种视觉渐进增强。

基本形状

值 circle(50%) 是基本形状的示例。规范定义了几个 <basic-shape> 值，包括

这些函数中的三个仅定义矩形。使用 inset() 函数，您可以定义四个偏移值，从而将任何包裹内容的线框拉近到对象，而不是它们原本应有的位置。rect() 函数通过指定与包含块的顶部和左侧边缘的距离来定义矩形。xywh() 函数通过指定与参考框的顶部和左侧边缘的距离以及从该起点设置矩形的宽度和高度来工作。

我们已经看到了如何使用 circle() 创建圆形。ellipse() 本质上是一个扁平的圆形。如果这些简单的形状都不符合要求，可以使用 polygon() 函数创建更复杂的形状，该函数允许定义一系列线条。path() 和 shape() 函数可用于通过一系列线条、曲线和移动命令创建任何形状。

在我们的 基本形状指南 中，我们探索了每种可能的形状及其创建方法。

来自框值的形状

形状也可以围绕框值创建。因此，可以在以下地方创建形状：

  • border-box
  • padding-box
  • content-box
  • margin-box

在下面的示例中，可以将 border-box 值更改为任何其他允许的值，以查看形状如何靠近或远离框。

若要更详细地了解框值，请参阅我们关于 来自框值的形状 的指南。

来自图像的形状

生成路径的一种有趣方法是使用具有 alpha 通道的图像 - 文本将围绕图像的非透明部分环绕。这允许将环绕内容叠加在图像上，或使用永远不会在页面上显示的图像纯粹作为一种创建复杂形状的方法，而无需仔细映射多边形。

请注意，以这种方式使用的图像必须与 CORS 兼容，否则 shape-outside 将表现得好像 none 是给定的值一样，并且不会出现任何形状。

在接下来的示例中，我们有一个具有完全透明区域的图像，并且正在使用图像作为 shape-outside 的 URL 值。形状围绕不透明区域（气球的图像）创建。

shape-image-threshold

shape-image-threshold 属性用于设置用于定义用于形状的图像区域的图像透明度的阈值。如果 shape-image-threshold 的值为 0.0（这是初始值），则区域必须完全透明。如果值为 1.0，则它完全不透明。介于两者之间的值意味着可以将半透明区域设置为形状的定义区域。

如果使用渐变作为定义形状的图像，则可以看到阈值的作用。在下面的示例中，如果更改阈值，则形状所经过的路径将根据所选的不透明度级别而改变。

若要详细了解如何从图像创建形状，请参阅 来自图像的形状 指南。

shape-margin 属性

shape-margin 属性向 shape-outside 添加边距。这将进一步缩短任何环绕形状的内容的行框，使其远离形状本身。

在下面的示例中，我们向基本形状添加了 shape-margin。更改边距以将文本推离形状默认情况下将经过的路径。

使用生成的內容作为浮动项目

在上面的示例中，我们使用了图像或可见元素来定义形状，这意味着可以在页面上看到形状。相反，可能希望沿着非矩形不可见线流动一些文本。例如，可以在 DOM 中添加一个空的浮动 <div> 或 <span> 元素并将其设为不可见。但是，可以使用 生成的內容 仅使用 CSS 创建形状，并将所有样式功能保留在 CSS 中。

在此示例中，使用生成的內容插入高度和宽度为 150px 的元素。然后，可以使用基本形状、框值，甚至图像的 alpha 通道来为文本环绕创建形状。

与 clip-path 的关系

用于创建形状的基本形状和框值与用作 clip-path 值的相同。因此，如果要使用图像创建形状并剪切掉图像的一部分，可以使用相同的数值。

下图是一个具有蓝色背景的正方形图像。我们使用 shape-outside: ellipse(40% 50%); 定义了一个形状，并且还使用 clip-path: ellipse(40% 50%); 剪切掉了我们用于定义形状的相同区域。

形状的开发工具

Firefox DevTools 中有一个 形状路径编辑器。此工具可用于检查 circle()、inset()、ellipse() 和 polygon() 值。如果多边形不完全正确，可以使用形状编辑器进行微调，然后将新值复制回 CSS。

更多 CSS 形状功能

在本指南中，我们讨论了围绕浮动形状环绕文本。有关所有模块功能以及其他相关功能的链接，请参阅 CSS 形状模块。这包括所有形状函数和相关指南。