CSS 的 shape-outside 属性CSS的shape-outside属性允许你定义一个元素（通常是浮动元素）的

CSS的shape-outside属性允许你定义一个元素（通常是浮动元素）的外部形状。这个形状可以是矩形、圆形或者自定义路径，它会影响其周围浮动元素的布局。shape-outside可以用于创造一些视觉上非常有趣的文本环绕效果，比如让文本环绕一张图片、一个形状或者其他浮动元素。

一个典型的效果如下所示：

1. 基本用法

想要完成上面的效果，需要先掌握shape-outside的一些基本用法：

矩形 (rectangle): 使用border-radius属性可以创建圆角矩形。

.float-element {
  shape-outside: rectangle(10px, 10px, 10px, 10px); /* 设置圆角 */
}

圆形 (circle): 可以指定圆形的半径。

.float-element {
  shape-outside: circle(50%); /* 半径为元素宽度的50% */
}

椭圆形 (ellipse): 可以指定椭圆形的两个半径。

.float-element {
  shape-outside: ellipse(50% 25%); /* 水平半径50%，垂直半径25% */
}

多边形 (polygon): 可以创建具有任意数量边的多边形，需要指定每个顶点的坐标。

.float-element {
  shape-outside: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* Optional: to clip the element itself to a circle */

}

路径 (path): 使用SVG路径定义形状。

.float-element {
  shape-outside: path('M10,10 L50,10 L50,50 L10,50 Z');
}

2. 文本环绕

shape-outside属性最常用于创建文本环绕效果。当一个浮动元素的shape-outside属性设置为margin-box、border-box或padding-box时，文本会环绕该元素的相应盒子模型边缘。此外，还可以使用url()函数引用图片或SVG的路径作为形状。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Clip Text Around Image</title>
<style>
  .float-image {
    float: left;
    shape-outside: circle(50%); /* 50% of the element's width */
    width: 200px; /* Width of the image */
    height: 200px; /* Height of the image */
    margin: 10px;
    padding: 5px;
    border: 1px solid #000;
    background-image: url('./强.jpg'); /* Replace with your image path */
    background-size: cover; /* Ensure the image covers the entire element */
    clip-path: circle(50%); /* Optional: to clip the element itself to a circle */
  }

</style>
</head>
<body>

<div class="float-image"></div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed blandit ligula non leo cursus, vitae eleifend nisl molestie. Nulla quis ligula at mauris rhoncus vestibulum. Maecenas at nulla ipsum. Donec rutrum congue leo at malesuada. Integer auctor tristique sem, vitae lacinia sem sagittis sed. Nullam auctor, enim nec pellentesque aliquam, arcu dui lacinia mauris, id lobortis enim odio id felis.
  </p>

</body>
</html>

在这个示例中：

.float-image 类定义了一个浮动的圆形图片元素，其中 shape-outside 属性使文本环绕该圆形。
.text-wrap 类定义了文本块的样式，它有一个左边距，以适应图片的宽度和边距。
CSS 的 background-image 属性用于将图片设置为元素的背景，并使用 background-size: cover; 确保图片完全覆盖元素，而不改变其宽高比。
一个可选的 clip-path: circle(50%); 被添加到 .float-image，这样图片本身也被裁剪成圆形。
HTML 中的 <div> 元素用于创建图片和文本环绕效果。

兼容性和注意事项

shape-outside是CSS Shapes Module Level 1的一部分，并非所有浏览器都支持。
当使用自定义形状时，确保为不支持shape-outside的浏览器提供一个回退样式。
使用shape-outside时，要注意性能影响，尤其是使用复杂路径或图片作为形状时。

3. 更多示例

示例 1：使用圆形环绕图片

.float-image {
  float: left;
  shape-outside: circle(50%); /* 50% 指的是图片宽度的一半 */
  width: 200px; /* 图片的宽度 */
  height: 200px; /* 图片的高度 */
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  background-image: url('path/to/image.jpg');
  background-size: cover; /* 确保图片覆盖整个浮动元素 */
}

在这个例子中，文本将环绕一个圆形图片。

示例 2：使用椭圆形环绕图片

.float-image {
  float: left;
  shape-outside: ellipse(50% 25%); /* 水平半径是宽度的50%，垂直半径是高度的25% */
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

这里文本环绕的是一个椭圆形图片。

示例 3：使用多边形环绕文本

.float-shape {
  float: left;
  shape-outside: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
  margin: 10px;
  width: 150px;
  height: 150px;
  background-color: #f0f0f0; /* 背景颜色，用于演示形状 */
  clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
}

在这个例子中，文本将环绕一个钻石形状的元素。

示例 4：使用SVG路径环绕文本

.float-svg {
  float: left;
  shape-outside: path('M10,10 L50,10 L50,50 L10,50 Z');
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

这里文本环绕的是一个通过SVG路径定义的自定义形状。

示例 5：文本环绕带有图片的复杂形状

.float-image-complex {
  float: left;
  shape-outside: url('path/to/complex-shape.svg#shapeID');
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  width: 200px;
  height: 150px;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

在这个例子中，文本环绕的是一个SVG文件中定义的复杂形状，并且该形状元素背后有一张图片。

示例 6：使用`margin`属性增加环绕空间

.float-shape {
  float: left;
  shape-outside: circle(50%);
  margin: 20px; /* 增加环绕空间 */
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
}

通过增加margin属性的值，可以让文本与形状之间有更多的空间。

4. `shape-outside` 使用场景

shape-outside属性除了用于环绕文本之外，还可以用于其他一些创造性的布局和设计效果。例如：

1. 创造视觉焦点

通过使用shape-outside创建非矩形的浮动元素，可以吸引用户的注意力，引导他们的视线。例如，一个心形或星形的浮动元素可以作为页面上的一个视觉焦点。

2. 设计响应式布局

在响应式设计中，可以使用shape-outside来创建适应不同屏幕尺寸的布局。例如，一个形状可以根据视口的大小变化而变化，从而影响其周围元素的布局。

3. 制作有趣的按钮和链接

可以给按钮或链接设置shape-outside，让文本环绕这些形状，创造独特的交互元素。

4. 增强数据可视化

在数据可视化中，可以使用shape-outside来增强图表和图形的视觉效果，例如，让文本环绕一个饼图或柱状图的轮廓。

5. 制作动画效果

结合CSS动画，shape-outside可以用于创建动态变化的形状，从而影响其周围元素的布局和动画效果。

6. 增强表单元素的视觉效果

可以让表单元素如输入框或按钮采用非标准的形状，以提升表单的视觉吸引力。

7. 创造艺术作品和背景

使用shape-outside可以创建复杂的艺术作品或背景图案，这些形状可以是几何图形、自然形状或其他抽象图案。

8. 制作导航菜单

可以设计一个非传统的导航菜单，其中菜单项采用独特的形状，并且菜单项周围的文本环绕这些形状。

9. 增强品牌元素

如果品牌有特定的形状标志或图案，可以使用shape-outside将这些元素融入到网页设计中，增强品牌识别度。

10. 制作游戏界面

在游戏或互动应用中，可以使用shape-outside来创建有趣的界面元素，如环绕特定形状的得分或生命值显示。

CSS 的 shape-outside 属性