smooth-shadow-ring

高起表面：使用 smooth-shadow-ring，切勿同时使用边框和阴影

适用场景

任何浮于页面表面之上的元素：卡片、对话框、模态框、弹出层、下拉菜单、菜单、工具提示、抽屉、Toast、命令面板。

问题

在同一个元素上同时添加 border-*（或 ring-*）和 shadow-*，会形成两道叠加的边缘：边框绘制出清晰的 1px 线条，而阴影从它外侧开始。最终会出现明显的双重边框：一道清晰的线，紧接着一道柔和的线。整体看起来厚重、灰暗且廉价。

规则

如果你打算在高起表面上同时使用 border-* 或 ring-* 类和 shadow-*，请改用 smooth-shadow-ring-{size}。它会在最终阴影层中融入一条 1px 的细环线，让边缘融入阴影，形成一道连续的线条。

• border shadow-md → smooth-shadow-ring-md
• ring-1 ring-neutral-200 shadow-lg → smooth-shadow-ring-lg
• 尺寸：smooth-shadow-ring-xs、-sm、-md（也可以直接用 smooth-shadow-ring）、-lg、-xl、-2xl
• 如果元素已经使用 smooth-shadow-ring-*，切勿再保留 border 或 ring。它已经包含环线；再加一道边缘会使边缘加倍。
• 如果表面不应有任何边缘线条，请使用普通的 smooth-shadow-{size}（不带 ring），而非边框。

颜色

环线和阴影可分别着色，并在同一元素上组合使用：

• shadow-{color} 为阴影着色，例如 shadow-blue-500
• smooth-ring-{color} 为环线着色，例如 smooth-ring-black/10、smooth-ring-blue-500/40

环线默认颜色为 rgba(0,0,0,0.05)，在深色模式下会切换为 rgba(255,255,255,0.18)。深色模式由 .dark 类、data-theme="dark" 驱动时会生效；对于由操作系统偏好驱动的深色模式，当页面声明 color-scheme: light dark 时也会生效。它不会仅依据 prefers-color-scheme 判断，因此仅支持浅色模式的网站会为所有访客保留浅色环线。如果网站的深色模式完全由 prefers-color-scheme 媒体查询驱动，请确保声明 :root { color-scheme: light dark; }，让环线随之切换。

深色模式下的 alpha 值有意设得远高于浅色模式。环线绘制在表面外侧，因此渲染出的颜色来自其背后的页面，而非它勾勒的表面。白色细线因此会朝凸起的深色表面提亮；如果 alpha 值太低，边缘颜色就会与表面自身的颜色融为一体而消失。如果表面颜色足够浅，以至于接近环线颜色（深色页面上的 neutral-700 及更亮的颜色），请显式设置 smooth-ring-*。

环线宽度

默认的细线宽度为 1px，并会自动跟随项目的 Tailwind 环线宽度。因此，若项目配置了 @theme { --default-ring-width: 0.5px; }，此处的细线也会是 0.5px，无需额外设置。不要硬编码宽度来匹配；只有在宽度必须不同于项目环线宽度时，才在任意作用域覆盖 --smooth-ring-width，例如通过 [--smooth-ring-width:2px] 在单个元素上设置。

覆盖样式

这些工具类不带 !important，并遵循正常的层叠规则，因此后续工具类、内联 style 或针对 box-shadow 的 JS 动画都可以正常覆盖它们。如果必须覆盖优先级更高的 CSS（例如组件库自带的 box-shadow，它通常不在层内），请在该元素上使用 Tailwind 的 important 修饰符，而不要进行全局覆盖：

<div class="smooth-shadow-ring-md!">…</div>

示例

<div class="rounded-2xl border border-neutral-200 shadow-md">…</div>


<div class="rounded-2xl smooth-shadow-ring-md">…</div>


<div class="rounded-2xl smooth-shadow-ring-md smooth-ring-black/10 shadow-blue-500">…</div>