应使用 :root 声明 --card-radius 变量统一控制卡片圆角，支持响应式与深色模式覆盖；通过基础类或属性选择器批量应用；js 动态更新时需同步 box-shadow 和伪元素圆角。
用 :root 声明全局 CSS 变量控制圆角值
所有卡片共享同一套圆角规则，最直接的方式是在根作用域统一定义变量，后续只需改一处就能批量生效。别在每个组件里重复写 border-radius: 8px 这类硬编码值。
实操建议：
- 在
:root中声明--card-radius: 8px，支持任意合法 CSS 长度单位（px、rem、em，甚至clamp()） - 若需响应式圆角，可配合
@media覆盖变量值，例如在移动端设为4px - 避免用百分比（如
50%）作默认值——它在宽高不等的卡片上会出椭圆，除非你明确需要这种效果
给所有卡片类选择器统一应用 border-radius 变量
不是所有“卡片”都叫 .card，真实项目中可能有 .post-card、.product-card、.user-card 等多个类名，或嵌套在 article、section 语义标签内。
实操建议：
- 用属性选择器批量匹配：
[class*="card"]或[class^="card-"]，但注意性能略低，慎用于高频重绘场景 - 更稳妥的是维护一个基础卡片类（如
.card-base），让所有卡片都继承它，并在该类中写border-radius: var(--card-radius); - 若用 CSS-in-JS 或组件库（如 Tailwind），确保其生成的样式也读取了同一变量，否则会失效
深色模式下圆角要不要变？变量得支持条件覆盖
圆角本身通常不随主题变，但有些设计系统会在深色模式下调小圆角以强化「锐利感」或适配更紧凑的布局。这时候不能靠 JS 切换 class，而应利用 @media (prefers-color-scheme: dark) 直接重设变量。
实操建议：
- 在
:root下先定义默认值，再在媒体查询内覆盖：@media (prefers-color-scheme: dark) { :root { --card-radius: 6px; } } - 不要在媒体查询里写具体选择器（如
.card { border-radius: 6px; }），否则和变量解耦，失去批量控制能力 - 检查浏览器兼容性：Chrome 87+、Firefox 96+、Safari 15.4+ 支持
@media (prefers-color-scheme)中修改:root变量
用 JavaScript 动态更新变量时，别漏掉伪元素和阴影
如果用户能通过设置面板切换圆角大小（比如从 4px 切到 12px），JS 修改 document.documentElement.style.setProperty('--card-radius', '12px') 是够的——但仅限于直接使用该变量的地方。
容易被忽略的点：
-
box-shadow的模糊半径常和圆角联动，比如box-shadow: 0 2px 8px rgba(0,0,0,0.08)，但它不会自动响应--card-radius变化，得手动同步 - 伪元素（如
::before模拟浮层边框）若也用了圆角，必须显式写border-radius: var(--card-radius)，否则仍保持旧值 - 某些 UI 库（如 Bootstrap 5）的
.card内部有子元素（.card-header）单独设置了圆角，它们不会继承父级变量，得单独覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
