css ::after 本身不能实现文字环绕不规则形状，真正起作用的是 shape-outside 属性，且仅对浮动元素生效；需配合 float、显式宽高及同一 bfc 才能生效。
CSS ::after 本身不能直接实现文字环绕不规则形状（比如圆形、多边形）的效果——它只是插入一个伪元素，不具备“定义文本流绕行路径”的能力。
真正起作用的是 shape-outside，不是 ::after
很多人误以为 ::after 是实现环绕的关键，其实它只是个“载体”。真正控制文字如何绕行的，是 shape-outside 属性，且它**只对浮动元素（float: left/right）生效**。所以典型做法是：用 ::after 创建一个浮动的、不可见的图形容器，再给它加 shape-outside。
-
::after必须设为display: block或inline-block，否则float和shape-outside不生效 - 必须显式设置
width和height，否则shape-outside无参考尺寸 -
shape-outside的值（如circle(50%)）是相对于该伪元素盒模型计算的，不是父容器 - 文字内容需在同一个 BFC 中，且不能被
overflow: hidden等截断
shape-outside 支持的值类型与常见写法
支持函数值（最常用）、图片（url()）、margin-box 等，但函数值兼容性最好、可控性强：
-
shape-outside: circle(50% at 50% 50%)→ 圆形，半径为元素宽高最小值的一半，居中 -
shape-outside: ellipse(60% 40% at 50% 50%)→ 椭圆，注意两个半径分别对应 x/y 方向 -
shape-outside: polygon(0 0, 100% 0, 100% 100%)→ 三角形，坐标基于伪元素自身左上角为原点 - 使用
inset()可实现“内凹”留白（如挖空一块矩形），但文字仍绕外轮廓，不是真正“穿入”
为什么文字没绕行？几个高频卡点
调试时最常见的不是语法错，而是布局前提被破坏：
- 伪元素没设
float: left（或right）→shape-outside完全被忽略 - 父容器用了
display: flex或grid→ 子项（含伪元素）脱离常规文档流，浮动失效 - 文字内容和伪元素不在同一块级格式化上下文（BFC）里，例如父容器有
overflow: auto但未触发新 BFC（需配合float或display: flow-root） -
shape-outside值写成circle(50px)却没配width/height→ 浏览器无法解析相对基准，降级为矩形绕行
一个可用的最小闭环示例
下面这段代码能实际跑通，注意每个必要条件都到位了：
div {
display: flow-root; /* 确保内部形成新 BFC */
}
div::after {
content: "";
float: left;
width: 200px;
height: 200px;
shape-outside: circle(50%);
margin-right: 20px;
}
然后 div 里放一段连续的中文或英文段落，文字就会自然绕着这个隐形圆走。如果换 polygon，记得坐标单位用百分比或像素，且至少三个点。
真正难的不是写对属性，而是理解 shape-outside 依赖浮动 + 尺寸 + BFC 这三者共存；少一个，效果就消失，而且不会报错，只会静默退化为普通块级排列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
