CSS Shapes 布局是一个强大的 CSS 功能，它允许开发者定义复杂的形状作为内容的布局容器边界，而不仅仅是传统的矩形或圆形。通过使用 CSS Shapes，你可以创建文本环绕不规则形状的效果，如图片、SVG 图形或其他 HTML 元素。这在创建视觉吸引力和改善页面布局方面非常有用。

CSS Shapes 的基本使用

CSS Shapes 主要通过几个属性来实现：

  1. shape-outside：这个属性是最关键的，它允许你定义一个形状，文本将围绕这个形状进行布局。你可以使用多种值来定义形状，包括圆形（circle()）、椭圆（ellipse()）、多边形（polygon()）以及图像（url() 指向的图片或 SVG）。
  2. shape-margin：这个属性定义了形状外部的一个额外空间，文本不会进入这个空间内。它可以帮助你微调文本与形状之间的距离。
  3. shape-image-threshold：当使用图像作为形状时，这个属性定义了图像中哪些部分被视为形状的内部（通常是基于图像的 alpha 通道）。
示例
使用 polygon() 创建多边形形状
<div class="shape-container">
  <img src="irregular-shape.png" alt="Irregular Shape" class="float-shape">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nullam dignissim convallis est. Quisque aliquam.
  </p>
</div>

<style>
.float-shape {
  float: left; /* 浮动图片 */
  shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  width: 300px;
  height: 200px;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

在这个例子中，.float-shape 类使用 polygon() 函数定义了一个菱形形状，文本将围绕这个菱形进行布局。

使用 SVG 图像作为形状
<div class="shape-wrapper">
  <img src="path/to/your-svg.svg" alt="SVG Shape" class="svg-shape">
  <p>
    Your text content here...
  </p>
</div>

<style>
.svg-shape {
  float: left;
  shape-outside: url('path/to/your-svg.svg');
  shape-margin: 20px;
  width: 200px;
  height: 200px;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

在这个例子中，SVG 图像被用作形状，文本将围绕这个 SVG 图像的轮廓进行布局。shape-margin 属性用于在文本和 SVG 形状之间添加额外的空间。

注意事项
  • 并非所有浏览器都支持 CSS Shapes 的所有功能，因此在生产环境中使用时需要进行兼容性测试。
  • 形状定义可能很复杂，特别是在使用多边形或 SVG 图像时，需要仔细调整以获得最佳效果。
  • CSS Shapes 主要用于文本环绕，但在某些情况下也可以用于其他布局目的。

通过利用 CSS Shapes，你可以创建更加动态和引人入胜的网页布局，从而提高用户体验和视觉吸引力。