mask-image无法实现文字环绕，因其仅视觉裁剪元素外观，不改变DOM矩形盒的文档流位置，浏览器排版引擎不会依据遮罩透明度重算文本流路径。
mask-image 本身不支持“浮动区域”或文字环绕效果——它只控制元素自身的可见区域，不能改变文档流或影响周围内容的排版。想实现非规则图形环绕（比如文字绕着一个不规则气泡形状走），mask-image 单独用不了，必须配合其他机制。
为什么 mask-image 无法实现文字环绕
mask-image 是视觉裁剪：它把一个矩形盒子“看起来”变成不规则形状，但盒子在 DOM 流中仍是完整矩形，占据全部宽高。浏览器排版引擎不会根据遮罩透明度去重算文本流路径。
常见误解是：给一张带三角气泡的图加 mask-image 后，文字就能自动绕开三角部分。实际结果是文字仍被整个矩形盒“推开”，气泡右侧留白巨大，三角区域空着却无法进字。
列表中的关键限制：
立即学习“前端免费学习笔记（深入）”；
-
mask-image不改变float、shape-outside或inline-size的计算依据 - 遮罩后的半透明/透明像素对
shape-outside无效，该属性只认clip-path或image的 alpha 通道（且仅限shape-outside: url(...)形式） - 目前无浏览器支持用
mask-image输出的 alpha 信息驱动环绕逻辑
真正能实现非规则环绕的方案：shape-outside + SVG 遮罩图
要让文字真实绕开不规则轮廓（如气泡三角、手绘边缘），唯一可靠路径是 shape-outside，且必须用支持 alpha 通道的 PNG 或内联 SVG 作为形状源。
操作要点：
- 准备一张 PNG：不规则图形部分为纯黑（#000），背景为全透明（不是白色），尺寸与容器一致
- 将该图用于
shape-outside: url("bubble-outline.png")，同时配float: left - 必须加
margin控制文字与形状的最小间距，否则紧贴边缘易读性差 - 注意：Firefox 对
shape-outside: url()的 PNG alpha 支持比 Chrome 更稳定；Safari 需要-webkit-shape-outside
示例片段：
.bubble {
float: left;
width: 247px;
height: 305px;
shape-outside: url("bubble-mask.png");
-webkit-shape-outside: url("bubble-mask.png");
margin-right: 16px;
}
如果坚持用 mask-image，只能模拟“视觉环绕”
当真实环绕不可行（如受限于 CMS 无法改 HTML 结构），可退而求其次：用两层叠加伪造效果。
做法是：
- 底层：一个
float: left的矩形容器，用mask-image显示不规则气泡图 - 上层：一个绝对定位的透明 SVG 路径（
<path d="M..."/>），仅作占位，设shape-outside和float，但visibility: hidden - 文字正常流，会被上层 SVG 的
shape-outside推开，视觉上就“绕”了
缺点明显：SVG 路径需手动描边，无法响应 mask-image 的渐变或动态变化；多分辨率适配困难；维护成本高。
容易被忽略的兼容性细节
所有基于 mask-image 或 shape-outside 的方案，在 Safari 中都可能失效，除非显式加上 -webkit- 前缀且确保父容器有 transform: translateZ(0) 强制硬件加速。
更隐蔽的问题是：某些构建工具（如 Webpack + css-loader）会把 url("mask.png") 中的路径转成 base64，导致 shape-outside: url(...) 无法识别 alpha 通道——必须保留原始相对路径并禁用该 loader 的 url 转换。
