shape-outside 不支持 css 变量插值，因其函数值（如 circle()、polygon()）被浏览器当作原子字符串处理，遇 var() 即判无效；需用 javascript 读取变量并动态设置 style.shapeoutside。
不能直接用 CSS 变量（--my-radius）动态控制 shape-outside 的函数参数，比如 circle(var(--r)) 或 polygon(calc(var(--x) * 1px) 0, ...) —— 浏览器会静默忽略整个声明，DevTools 里该行被划掉，且不报错。
为什么 shape-outside 不支持 CSS 变量插值
CSS Shapes 的函数值（circle()、polygon() 等）属于「函数式语法」，而当前所有浏览器（Chrome/Firefox/Safari 截至 2026 年）均未实现对这些函数内部参数的 CSS 变量解析。它和 background 或 transform 不同，后者已支持变量计算；shape-outside 的函数值仍被当作原子字符串处理，遇到 var() 就直接判定为无效语法。
常见错误现象：
-
shape-outside: circle(calc(var(--size) * 1px));→ DevTools 显示为shape-outside: none，文字按矩形环绕 -
shape-outside: polygon(0 0, 100% 0, var(--right) 100%, 0 100%);→ 整条声明被跳过，无 warning - 即使配合
@property声明了类型，也无法触发 shape 重计算
可行的动态控制方案：CSS 自定义属性 + JavaScript 注入
真正能“动态”改变形状的路径只有一条：用 JS 读取变量值，拼出合法的 shape-outside 字符串，再写回 style 或 class。CSS 变量仅作数据中转，不参与函数解析。
实操建议：
- 给元素设一个初始 class，例如
class="shape-dynamic"，并在 JS 中持有对该元素的引用 - 用
getComputedStyle(el).getPropertyValue('--shape-type')读取变量，但注意：只读字符串，不自动转数值 - 手动判断变量值，拼出完整声明：
el.style.shapeOutside = 'circle(40% at 50% 50%)';或el.style.shapeOutside = 'polygon(0 0, 100% 0, 100% 70%, 30% 100%, 0 100%)'; - 若需响应式联动（如 resize 或 scroll 触发），用
requestAnimationFrame节流，避免高频重排
示例（简化版）：
const el = document.querySelector('.shape-dynamic');
function updateShape() {
const type = getComputedStyle(el).getPropertyValue('--shape-type').trim();
if (type === 'circle') {
el.style.shapeOutside = 'circle(45% at 50% 50%)';
} else if (type === 'notch') {
el.style.shapeOutside = 'polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)';
}
}
window.addEventListener('resize', updateShape);
updateShape();
用 @property 和动画模拟“动态”效果？别试
有人尝试用 @property 声明 --radius 并在 @keyframes 中驱动 shape-outside，结果是：动画完全不触发，shape-outside 无法被动画化（animatable: no）。W3C 明确将其列为「non-animatable property」。
替代思路（有限但可用）：
- 用多个预设 class（如
.shape-sm/.shape-lg）配合classList.toggle()切换，每个 class 写死完整的shape-outside - 对
clip-path做动画（它支持变量和 transition），视觉上近似 shape 效果，但注意：它裁剪元素本身，不控制文字流 - 放弃纯 CSS 方案，在复杂交互场景下，用 SVG
<path></path>+shape-outside: url(#my-path)，JS 动态更新d属性并触发重绘
容易被忽略的硬性前提依然存在
无论你用 JS 还是 class 切换，只要 shape-outside 生效，下面四点一个都不能少：
-
float: left或float: right必须显式声明（float: none或 Flex/Grid 容器内子项直接失效） - 元素必须是块级（
display: block），<img>推荐加display: block避免底部留白干扰 - 必须有明确宽高（
width+height，或aspect-ratio）—— JS 修改 shape 前得先确保尺寸已确定 - 父容器不能有
overflow: hidden、contain: layout或display: flex/grid，否则浮动区域被截断，形状不可见
最常翻车的点是：JS 改了 shape-outside，但忘了元素还在 display: flex 容器里 —— 此时 float 被忽略，shape 直接归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
