CSS变量（--radius）是动态控制border-radius的唯一轻量方案，需带单位定义、设fallback值，并通过setProperty()配合calc()实现JS更新与响应式覆盖。
如何用 CSS 变量控制 border-radius 的动态值
直接改 border-radius 的数值当然可以，但要让圆角大小随状态、主题或用户偏好实时变化，硬编码就不可维护。CSS 变量（--radius）是唯一轻量、可继承、支持 JS 动态更新的方案。
关键不是“能不能”，而是变量必须作用在能被计算的位置——border-radius 本身支持 calc() 和变量，但要注意单位一致性与默认回退。
- 变量定义必须带单位（如
--radius: 8px），不能只写数字，否则border-radius: var(--radius)会失效 - 推荐在 :root 中定义，方便全局复用：
:root { --radius: 12px; } - 组件内使用时加 fallback 更稳妥：
border-radius: var(--radius, 4px)，避免变量未定义时样式崩塌
JS 动态修改圆角时为什么没生效
常见错因是变量名拼错、作用域不对，或修改了错误的元素节点。CSS 变量是级联的，document.documentElement.style.setProperty() 改的是根变量，影响所有用到它的元素；而给某个 div 单独 setProperty，只影响它及其子元素。
- 想全局切换主题圆角：用
document.documentElement.style.setProperty('--radius', '6px') - 只想改某个卡片：先获取该元素
const card = document.querySelector('.card')，再card.style.setProperty('--radius', '20px') - 别漏掉单位！
setProperty('--radius', 20)是错的，浏览器不识别无单位数值 - 动画不支持直接对 CSS 变量做 transition，需配合
border-radius: calc(var(--radius) * 1)这类“触发重绘”的写法（部分浏览器仍有限制）
响应式圆角怎么用变量实现
媒体查询里可以直接覆盖变量值，比重复写多套 border-radius 更干净。但注意：变量覆盖必须在对应媒体查询块内，且优先级由选择器决定。
立即学习“前端免费学习笔记（深入）”；
- 基础值写在 :root，响应式值写在 @media 内：
@media (max-width: 768px) { :root { --radius: 4px; } } - 如果组件自己定义了
--radius（比如.btn { --radius: 6px; }），那媒体查询得针对该选择器重写：@media (prefers-reduced-motion: reduce) { .btn { --radius: 0; } } - 移动端小屏下设为
0或2px更易点击，别盲目沿用桌面端的12px
border-radius 四个角分别用变量控制的写法
单变量只能统一大小，真要左上圆角大、右下小，就得拆成四个变量。CSS 不限制变量数量，但命名要清晰，避免和系统变量冲突。
- 定义四角变量：
:root { --radius-top-left: 12px; --radius-top-right: 4px; --radius-bottom-right: 8px; --radius-bottom-left: 0; } - 使用时按顺序传入：
border-radius: var(--radius-top-left) var(--radius-top-right) var(--radius-bottom-right) var(--radius-bottom-left) - JS 批量更新时，建议封装函数避免重复写 setProperty，例如：
function updateRadius(tl, tr, br, bl) { document.documentElement.style.setProperty('--radius-top-left', tl); /* ... */ } - 注意：若某角不需要动态，可固定写死，比如
border-radius: var(--radius-top-left) 4px 8px 0，混合使用更灵活
实际项目中，最常被忽略的是 fallback 值和单位缺失——变量一旦未定义或类型错误，整个 border-radius 就会退回到浏览器默认（通常是 0），而不是报错提示。调试时优先检查 computed style 里变量是否已解析为有效值。
