border-radius工具类需搭配border-style:solid及颜色/背景才可见，推荐语义化命名如rounded-sm/lg并预设像素值，同时声明border-style防重置样式干扰，差异化圆角用rounded-tl等原子类。
border-radius 工具类怎么写才不漏边？
直接用 border-radius 工具类时，最常见问题是「只设了圆角，但没配边框」——结果视觉上完全看不出变化。因为圆角本身不改变颜色或线条，必须搭配可见的 border 或背景色对比才能体现。工具类设计要预设常用组合，而不是孤立暴露原生属性值。
- 推荐按语义命名，比如
rounded-sm、rounded-lg，对应具体像素值（如4px、12px），避免用模糊词如rounded-medium - 所有圆角工具类必须同时声明
border-style: solid（哪怕后续覆盖为none），否则在某些重置样式（如 normalize.css）下，border-width有值但无style会导致边框不可见 - 注意
border-radius的四个角可单独控制，工具类若需差异化（如仅左上+右下），得另设rounded-tl、rounded-br等原子类，不能靠一个rounded涵盖全部场景
border 工具类和 rounded 组合时为什么边框断开？
当同时使用 border 和 border-radius 工具类，却出现边框在圆角处“断裂”或“错位”，通常是单位或优先级冲突导致。CSS 中 border-radius 会裁剪边框，但前提是边框本身是连续且未被其他规则干扰。
- 确保
border工具类包含完整三元组：border-width、border-style、border-color；漏掉border-style是最常见断边原因 - 避免混用简写和拆分写法，例如：先用
border-2（设 width + style + color），又用border-blue-500（只改 color），后者若未重置 style，可能因 CSS 层叠丢失边框线型 - 如果用了
box-sizing: border-box（现代框架默认），圆角对布局影响可控；但若项目中存在box-sizing: content-box元素，border-radius可能导致内容溢出或裁剪异常
如何用 Tailwind 风格写出最小可用的 rounded + border 工具类？
不依赖框架也能快速搭出可用工具类，关键是控制变量数量：只暴露宽度、颜色、圆角尺寸三个维度，其余固定。
.border { border-style: solid; }
.border-0 { border-width: 0; }
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-blue-500 { border-color: #3b82f6; }
.rounded { border-radius: 0.25rem; } /* 4px */
.rounded-md { border-radius: 0.375rem; } /* 6px */
.rounded-lg { border-radius: 0.5rem; } /* 8px */这样写出来，<div class="border border-2 border-blue-500 rounded-lg"> 就能稳定生效。不需要额外 JS 或媒体查询，纯 CSS 层叠即可。
立即学习“前端免费学习笔记（深入）”；
移动端圆角边框在 Safari 上为啥变虚或消失？
iOS Safari 对 border-radius + border 的渲染有特殊限制：当元素含 transform、backface-visibility 或开启硬件加速时，圆角边框可能被强制光栅化，导致边缘发虚甚至整条边框不可见。
- 临时修复：给元素加
will-change: transform或-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgo...)（极简透明 mask）可强制重绘 - 更稳妥做法：避免在圆角边框容器上叠加
transform: scale(0.99)类操作；改用width/height调整尺寸 - 真机调试时注意：Safari 开发者工具里“显示绘制区域”能快速定位是否因层合成问题导致边框丢失
圆角和边框工具类看着简单，实际卡点都在细节：style 是否声明、单位是否统一、移动端合成层是否干扰。写的时候少想“怎么通用”，多想“在哪种 DOM 结构下一定会坏”。
