CSS | shape-outside 属性

CSS | shape-outside 属性定义文本环绕元素的形状。

语法

shape-outside: none|<shape-box>|<basic-shape>|<image>|initial|inherit;

• none：默认值，文本不应沿着浮动盒子的外侧进行形状。
• ：指定元素的边界框作为文本环绕形状的边界框。
• ：使用基本形状，例如圆形或多边形，来定义文本环绕形状。
• ：指定一个引用图像作为文本环绕形状。
• initial：设置该属性为它的默认值。
• inherit：从父元素继承该属性。

示例

<div class="floating-box">
  <img src="https://picsum.photos/id/237/200/300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit consectetur neque, a accumsan nisl bibendum eget. Nulla auctor felis eget leo pulvinar aliquam. Maecenas interdum aliquet commodo. Vestibulum molestie ligula id porttitor congue. Sed et odio eget nulla fermentum bibendum. Quisque pretium, lectus et placerat volutpat, enim ex convallis augue, nec laoreet mi justo a magna.</p>
</div>

.floating-box {
  float: left;
  margin-right: 10px;
  shape-outside: circle(50%);
}

将图片包裹在浮动的 <div> 元素中，并将其定位为左浮动并添加一些额外的内边距和形状外。使用 shape-outside 属性来定义图片的文本环绕形状为圆形。结果如下图所示：

基本形状

shape-outside 还支持其他基本形状，例如 ：矩形、圆形、椭圆、外形多边形等。以下示例使用 polygon() 函数来定义一个多边形形状：

.floating-box {
  float: left;
  margin-right: 10px;
  shape-outside: polygon(0 0, 100% 0, 100% 70%, 30% 70%, 30% 30%, 0 30%);
}

结果如下图所示：

图像形状

我们也可以使用 CSS 图像值作为文本环绕形状。请注意，图形必须满足 SVG 所支持的要求。

以下示例将 SVG 裁切路径作为图像源，并将其作为文本环绕形状：

.floating-box {
  float: left;
  margin-right: 10px;
  shape-outside: url(mask.svg#myPath);
}

其中，mask.svg 包含 <defs> 元素定义的 <path> 元素，并指定 id="myPath"。

结果如下图所示：

浏览器兼容性

shape-outside 属性并不被所有浏览器支持，目前仅在现代浏览器（Chrome，Firefox 等）中可用。一些旧浏览器没有完全支持该属性，因此应谨慎使用。

总结

shape-outside 属性可以帮助我们改进文本与图片的排版效果，使页面更加美观。我们可以使用基本形状、图像路径等方式来定义元素的文本环绕形状。但是，需要注意该属性不是跨浏览器支持的，需要谨慎使用。