这样的文字环绕效果，你绝对没有见过！

图片环绕文字大家太熟悉了，这是初学css必须经历的效果之一。

但是你有没有想过让文字按照我们想要的方式进行环绕呢？

我是渡一子辰老师，今天就来教大家实现这种奇妙的环绕方式。

下图这种效果在一些设计感强的网站上经常可以看到，给人一种炫酷和新颖的感觉。

其实，只要掌握一个 CSS 属性，就可以轻松实现这种效果。这个属性就是 shape-outside，它可以让浮动元素的外部文字按照指定的形状进行环绕，而不是按照默认的盒子边缘。

shape-outside 的用法

shape-outside 的主要函数值有四个，分别是：

• inset()：表示浮动文字按照上、右、下、左在浮动元素上的偏移量得出的矩形边缘进行围绕
• circle()：表示浮动文字按照 shape-radius 为半径画出的圆形的外边缘围绕
• ellipse()：表示浮动文字按照 x 轴以 xr 为半径，y 轴以 yr 为半径画出的椭圆形的外边缘围绕
• polygon(x1 y1, x2 y2, …, xn yn)：表示浮动元素按照，通过给定的坐标点的值连接画出的不规则形状的边缘进行围绕

polygon 参数说明：

x1：表示第一个点在x轴的坐标位置

y1：表示第一个点在y轴的坐标位置

x2：表示第二个点在x轴的坐标位置

y3：表示第二个点在y轴的坐标位置

xn：表示第n个点在x轴的坐标位置

yn：表示第n个点在y轴的坐标位置

shape-outside 的示例

我们来看几个使用 shape-outside 的示例，感受一下它的魅力。

文字环绕椭圆

在正常情况下，我们使用浮动让文字环绕是下图的效果，为了便于理解和观看，我们先给图片加上边框。

我们在给图片设置一个圆形的裁剪效果，这时候，你会发现文字并没有按照圆形来环绕，而还是按照盒子来环绕。

为了让文字按照圆形来环绕，我们只需要给图片添加一个 shape-outside: circle(50%); 的属性即可。

这里 50% 表示半径是盒子宽度的一半，也就是画了一个内切圆。

如果想要调整圆心或者半径，可以使用完整的写法 shape-outside: circle(50% at 50% 50%)，其中 50% 50% 表示圆心在盒子中心。

设置后，我们就得到了如下效果：

文字环绕多边形

如果我们想要让文字环绕一个多边形或者一个不规则图形，我们可以使用 shape-outside: polygon() 的属性。

比如，我们可以设置 shape-outside: polygon(0 0, 59% 0, 36% 18%, 42% 28%, 75% 30%, 90% 43%, 97% 58%, 88% 80%, 94% 97%, 0 97%);，表示多边形由这些坐标点连接而成。

设置后，我们就得到了如下效果：

总结

shape-outside 是一个非常有趣和实用的 CSS 属性，它可以让我们实现很多富有创意和美感的文字环绕效果。

如果你想了解更多关于这个属性的用法和兼容性，请参考 MDN 的文档，其实它的用法和 clip-path 基本上是一致的。

这个效果其实并不难实现，但由于确实很少有人用，我们也难以判断出该用什么样的实现思路，所以平常还是要保证自己的知识体系足够细致。

如果你有什么问题或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！