shape-outside 不生效的首要原因是未设置 float；它仅对 float: left/right 元素有效，且需避免 overflow 隐藏浮动、使用纯黑白 png 或 polygon() 替代图像路径，并注意 line-height 与浏览器兼容性。
shape-outside 不生效？检查 float 是否已设置
直接原因：即使写了 shape-outside，若元素没触发浮动上下文，它完全不会起作用。CSS 规范明确要求该属性只对浮动元素（float: left 或 float: right）生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认目标元素同时设置了
float和shape-outside，缺一不可 - 避免用
display: inline-block或position: absolute替代float—— 这些不构成浮动上下文 - 注意父容器的
overflow值（如overflow: hidden）可能意外清除浮动，导致shape-outside失效
用图片路径做 shape-outside 时，为什么边缘锯齿或不贴合？
根源在于图像本身：浏览器只读取 PNG 的 alpha 通道（透明度），并把所有非完全透明像素视为“实体边界”。哪怕有半透灰边、抗锯齿模糊、或导出时带了轻微阴影，都会让环绕轮廓毛糙甚至偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用纯黑白 PNG（1 位 alpha）—— 黑=实体，白=完全透明，无中间灰度
- 导出时关闭“抗锯齿”和“平滑边缘”，在 Photoshop 中用“硬边选区 + 删除背景”生成轮廓
- 避免使用 JPG 或 WebP（不支持 alpha），也别依赖 CSS 的
filter: drop-shadow()伪造形状 —— 它不影响shape-outside计算
想用 CSS 函数动态生成形状？polygon() 是最稳的选择
shape-outside: polygon() 是目前兼容性最好、可控性最强的方案，尤其适合响应式场景下微调环绕路径。比起 circle() 或 ellipse()，它允许你逐点定义任意折线轮廓，且坐标支持百分比、vw/vh 等相对单位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 顶点顺序必须顺时针或逆时针闭合（首尾点无需重复），否则部分浏览器会忽略整个声明
- 少用绝对像素值（如
100px），改用25%、calc(50% - 2rem)提升弹性 - Chrome 和 Safari 支持
shape-margin微调文字与形状边缘的距离，但 Firefox 目前不支持该属性
文字环绕后出现错行或断字异常？优先查 line-height 和 font-size
shape-outside 只影响块级盒模型的浮动排版逻辑，不干预内联内容（如文字）本身的渲染规则。一旦环绕区域高度变化剧烈（比如一个尖角突然收窄），浏览器会强行压缩行高或拆分单词来适配，造成视觉断裂。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给环绕文字容器加
line-height: 1.6等稳定值，避免依赖默认或继承值 - 慎用
word-break: break-all—— 它会让长英文单词在任意位置断开，破坏可读性 - 如果形状底部收得很窄，考虑用
min-height给文字容器兜底，防止最后一行被“挤飞”到浮动区域外
真正难调的是多段落 + 动态内容下的形状自适应——每次 DOM 变化都可能让 shape-outside 的计算结果偏移几像素，这时候靠 CSS 已经不够，得结合 ResizeObserver 监听尺寸再重设 polygon 坐标。
