shape-outside 对文字无反应最常见原因是未设置 float；它仅对浮动元素生效，且需明确宽高、非行内级、避免 overflow: hidden 干扰。
shape-outside 为什么对文字没反应
最常见的情况是：用了 shape-outside，但文字还是直上直下地流过，完全不绕形。根本原因不是属性写错了，而是它只对**浮动元素（float）生效**，且该元素必须有明确的宽高和内容（或 content-visibility: auto 等会抑制渲染的属性也会干扰）。
- 确保目标元素设置了
float: left或float: right（float: none或未设 float 时，shape-outside完全被忽略） - 元素不能是行内级（比如
span），推荐用div或img；如果是img，记得加display: block防止底部留白影响形状对齐 - 如果父容器用了
overflow: hidden或contain: layout，可能裁剪掉浮动区域，导致形状“不可见”，文字自然不绕
怎么让 shape-outside 走 SVG 路径而不是简单图形
用 url(#myPath) 引用内联 SVG 的 <path></path> 最灵活，但路径坐标系容易出错——它默认以元素左上角为原点，且单位是 CSS 像素，不是 SVG viewBox 的逻辑单位。
- SVG 必须内联在 HTML 中（不能外链），否则浏览器无法解析
url(#id) -
<path></path>的d属性值要保证在元素尺寸范围内；建议先给浮动元素设固定宽高（如width: 200px; height: 200px;），再按此尺寸写路径 - 避免用
transform移动 SVG 元素，因为shape-outside只读取原始几何，不计算 transform 后的位置 - 示例：
<div style="float: left; width: 180px; height: 180px; shape-outside: url(#blob);"></div> <svg width="0" height="0" style="position: absolute;"> <defs> <path id="blob" d="M90,20 C120,10 150,30 150,60 C150,90 120,110 90,100 C60,90 30,70 30,40 C30,30 60,20 90,20 Z"/> </defs> </svg>
shape-outside 和 margin、clip-path 混用时谁优先
shape-outside 只控制**文字环绕的边界**，不影响元素自身渲染区域；而 margin 影响浮动布局位置，clip-path 控制元素显示范围——三者互不替代，但顺序和目的完全不同。
-
margin决定浮动元素离文字多远，它会影响文字起始环绕的位置，但不改变形状本身 -
clip-path只“剪”掉元素视觉部分，shape-outside仍按原始盒模型 + 路径计算环绕，可能导致文字绕了个“看不见的形” - 想让文字真正绕着可见轮廓走？必须让
shape-outside的路径和clip-path的路径一致，或者干脆不用clip-path，只靠shape-outside+ 背景透明来模拟 - 性能提示：复杂
path在滚动时可能触发频繁重排，Chrome 下建议路径点数控制在 50 以内
Firefox 不支持 shape-outside url() 怎么办
Firefox 目前（v125）仍不支持 shape-outside: url(#id)，只认 inset()、circle()、ellipse()、polygon() 这些函数语法。这不是 bug，是规范实现进度问题。
立即学习“前端免费学习笔记（深入）”；
- 如果必须用自定义路径且要兼容 Firefox，唯一可行方案是把路径转成
polygon()函数——用工具（如 https://bennettfeely.com/clippy/）导出顶点坐标，手动拼成shape-outside: polygon(10% 0%, 90% 0%, ...) -
polygon()的坐标是相对盒模型的百分比或像素，注意和 SVG 路径的坐标系差异；顶点太多会导致 CSS 字符串超长，某些旧版 Safari 会截断 - 别指望
@supports (shape-outside: url())做渐进增强——Firefox 根本不识别这个条件，会直接跳过整条规则
真正难的不是写出那个 path，而是让设计师给的矢量图，在不同屏幕缩放、不同字体大小下，依然保持文字环绕的节奏感——这时候你得放弃纯 CSS，考虑用 element.resizeObserver 动态重算 polygon() 坐标，或者接受它只在特定断点下工作。
