tailwind 中 border-white/20 不生效，因 border 工具类不支持斜杠透明度语法；正确做法是用 bg-white/5 + backdrop-blur-sm 外层容器模拟描边，或使用 ring-1 ring-white/20。
border-white/20 在 Tailwind 中根本不会生效
直接写 border-white/20 不会生成带透明度的边框色 —— Tailwind 的 border-{color} 工具类不支持斜杠语法（那是 text-、bg- 等类才支持的透明度变体）。你写的这个类会被完全忽略，最终边框要么是默认色（通常是 border-current），要么干脆没边框。
正确实现毛玻璃描边：用 bg-white/5 + backdrop-blur 配合 border
真正的毛玻璃（frosted glass）效果依赖两个关键：背景半透 + 模糊。描边本身不能“毛玻璃”，但可以通过在卡片外层加一层带模糊和微透的装饰容器来模拟描边感。实际做法是：
- 卡片本身设
backdrop-blur-sm（或md、lg），并确保父容器有可穿透的背景（如bg-black/10或页面真实背景） - 不用
border，而是在卡片外再包一层div，设bg-white/5+backdrop-blur-sm+rounded-xl，再通过px-0.5 py-0.5或ring-1 ring-white/10控制“描边厚度” - 若坚持用 border，可用
border-[rgba(255,255,255,0.1)]（需启用 arbitrary values）或预设的border-white/10（仅当你在tailwind.config.js中显式启用了borderOpacity插件）
为什么 border-white/10 大概率也不起作用
Tailwind 默认不开启 borderOpacity 支持。即使你写了 border-white/10，也会被当作无效类跳过。要让它工作，必须：
- 确认已安装并加载
@tailwindcss/forms或@tailwindcss/typography（它们默认启用部分 opacity 扩展） - 或手动在
tailwind.config.js的theme.extend中添加：borderOpacity: ['responsive', 'hover', 'focus'],
- 然后重新构建 CSS —— 否则
/10这种写法始终无效
更轻量且兼容性更好的替代方案
如果只是想模拟“白色细描边+毛玻璃感”，推荐绕开 border 透明度问题，改用 ring 工具类：
-
ring-1 ring-white/20：生成一层外发光式描边，支持透明度，无需额外配置 - 搭配
ring-inset可转为内描边（类似 border） - 与
backdrop-blur-sm共存无冲突，且所有现代浏览器支持良好 - 注意：
ring会叠加在 border 上，如有 border 建议先清空（border-0）
毛玻璃描边的本质不是“给边框加透明”，而是让边缘区域参与模糊与透色的视觉混合 —— 把注意力放在容器层级和 backdrop 属性上，比硬调 border 透明度靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
