CSS变量不能直接实现文字环绕间距，因为shape-outside仅定义轮廓，真正控制文字与轮廓间距的是shape-margin属性；变量仅可为其赋值，需配合float生效，且必须用var()调用并确保作用域正确。
CSS 变量本身不能直接控制文字环绕形状（如 shape-outside）的间距，因为文字环绕是布局行为，而“间距”在这里实际指文字与浮动/裁剪形状之间的空白距离——这个距离由 margin（作用于浮动元素）或 shape-margin（专用于 shape-outside）决定，--* 自定义属性只能提供值，不改变机制。
为什么不能靠 CSS 变量直接“实现环绕间距”？
很多人误以为设个 --text-wrap-gap: 12px 就能让文字自动绕着圆角矩形留出 12px 空隙，但事实是：shape-outside 定义的是轮廓，真正控制文字离轮廓多远的，是独立的 shape-margin 属性。CSS 变量可以给 shape-margin 赋值，但它不是“功能开关”，只是值的容器。
-
shape-outside必须配合float（如float: left）才生效 -
shape-margin才是那个“间距”参数，单位必须是长度（px、em等），不能是无单位数字 - 变量要生效，得在使用处用
var(--gap)显式调用，且父级上下文需能访问该变量
如何用 CSS 变量 + shape-margin 实现可配置的环绕间距？
核心是把变量作为 shape-margin 的值来源，同时确保浮动元素结构正确。典型写法：
.wrap-shape {
float: left;
shape-outside: circle(50%);
shape-margin: var(--text-wrap-gap, 16px); /* 默认 16px */
width: 100px;
height: 100px;
}
<p>article {
--text-wrap-gap: 24px; /<em> 在容器上设置，子元素可继承 </em>/
}- 变量必须在能被
.wrap-shape继承或作用域内声明（推荐设在:root或最近公共祖先上） -
shape-margin不支持百分比值（会忽略），只接受绝对长度或calc()表达式 - 若想响应式调整，可结合
@media重设变量：@media (max-width: 768px) { article { --text-wrap-gap: 12px; } }
常见踩坑：文字没绕、间距不生效、变量被忽略
这三类问题几乎都源于基础约束被违反：
立即学习“前端免费学习笔记（深入）”；
- 忘记加
float——shape-outside在非浮动元素上完全无效 - 把变量写成
shape-margin: --text-wrap-gap（漏了var()包裹） - 变量定义在伪元素或局部作用域（如
.wrap-shape::before），导致.wrap-shape本体取不到 - 用
display: inline-block或position: absolute替代float，结果shape-outside失效 - 对非块级文本容器（如
<span></span>）应用shape-outside—— 它只影响块级流内文字
真正“优雅”的关键不在变量多炫，而在明确谁控制形状、谁控制间距、谁触发环绕——float 是开关，shape-outside 是路径，shape-margin 是距离，变量只是让这个距离可复用、可主题化。别指望变量自己干活，它只负责把数字送到位。
