shape-outside 必须搭配 float 才生效，否则被忽略；仅设 shape-outside 无 float 时文字不绕行，常见于误以为浏览器不支持；@supports 检测需完整写法如 (shape-outside: circle())，缺括号或缺值均无效。
shape-outside 必须搭配 float 才生效，否则直接忽略
很多开发者写完 shape-outside: circle() 发现文字根本不绕行，第一反应是“浏览器不支持”，其实更大概率是漏了 float。CSS Shapes 规范明确要求：只有设置了 float: left 或 float: right 的元素，shape-outside 才会参与文本流计算。
常见错误现象：
- 仅加
shape-outside但没设float→ 文字完全无视形状 - 用
display: inline-block或position: absolute替代float→ 形状无效（规范不覆盖这些定位方式） - 父容器用了
display: flex或display: grid→ 子项的float被降级为“仅影响自身”，shape-outside失效
正确做法：先确保浮动基线存在，再叠加形状增强。例如：
img {
float: left;
width: 120px;
height: 120px;
border-radius: 50%;
}
@supports (shape-outside: circle()) {
img {
shape-outside: circle(50%);
shape-margin: 12px;
}
}
@supports 检测必须写完整属性值对，括号不能省
@supports (shape-outside: circle()) 是有效检测；@supports shape-outside: circle()（缺括号）会被浏览器完全忽略，等同于没写。这不是格式问题，而是 CSSOM 解析语法强制要求——括号内必须是合法声明字符串。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 误写成
@supports (shape-outside)→ 缺值，返回 false（所有浏览器） - 在 JS 中调用
CSS.supports('--my-var: red')正确，但CSS.supports('--my-var', 'red')在 Safari 16.4–17.3 返回 false - 想兼容旧版 Safari（如 10.0），它支持
circle()却不支持url()，可用叠加检测：@supports (shape-outside: circle()) and not (shape-outside: url(""))
Firefox 和 Safari 对 polygon() / url() 的处理差异明显
Firefox 早期版本（如 58–67）能解析 polygon()，但对 url() 形状常因图像加载时机或 CORS 问题失败；Safari 10+ 支持 url() 但部分子版本会静默忽略透明通道导致形状异常。
实操建议：
- 优先用
polygon()或circle()，避免依赖图像资源 - 若必须用
url()，务必配shape-image-threshold: 0.5控制 alpha 截断点，并在@supports中单独检测：@supports (shape-outside: url("")) - 不要在
@supports块外重复声明float——它已是基础布局层，增强样式只负责形状逻辑
别指望 @supports 能捕获渲染行为不一致的问题
@supports (shape-outside: circle()) 返回 true，只代表浏览器“认得这个语法”，不代表它真能正确绘制或与 clip-path 协同工作。比如某些 Android WebView 在开启 transform: scale() 后，shape-outside 边界会错位，但 @supports 完全无法预警。
真正关键的降级点往往藏在组合行为里：
-
shape-margin在 Safari 12–13 中对polygon()的支持不稳定，建议固定用px单位，避开百分比 -
clip-path和shape-outside同时使用时，Firefox 可能按不同坐标系计算，需额外用margin微调文字起始位置 - 如果文字环绕后出现断行异常，不是
shape-outside不生效，而是line-height或font-size在缩放/高DPI下被重算——这类问题@supports根本不感知
复杂点在于：你得把 @supports 当作第一道过滤器，而不是最终判决书。真正的兼容性防线，还得靠浮动基线 + 简单几何函数 + 运行时观察文字流表现。
