border-radius 与 border-style: dashed 可同时使用但圆角处虚线会断裂，因规范要求各边独立绘制；解决方案是用四个 linear-gradient 模拟虚线边框并配合 background-clip 和 padding 实现自然圆角衔接。
border-radius 和 border-style: dashed 不能同时生效？
直接写 border-radius: 8px; border: 2px dashed #999; 确实能出圆角+虚线，但多数浏览器（尤其是 Chrome 115+、Safari 16.4+）会在圆角处把虚线段强行拉直或截断，导致角落出现实线“小尾巴”或虚线断裂。这不是 bug，是规范里对 dashed 边框的渲染定义：每个边单独绘制，不跨角连接。
用 linear-gradient 拼出带圆角的虚线边框
核心思路是放弃 border，改用 background-image 在元素四边分别画四条带圆角的虚线，再用 background-clip: padding-box 避免遮盖内容。关键在于每条线都要「自己处理好两端的圆角衔接」。
- 顶部线：用
linear-gradient画水平虚线，高度设为2px，background-position: top，background-size: 12px 2px（12px 是虚线段+间隙总长） - 左/右/下同理，但方向和尺寸要对应（比如左边线用
background-size: 2px 12px） - 所有四条线的
background-repeat: repeat-x或repeat-y必须显式声明，否则默认不重复 - 必须加
padding: 2px（至少等于虚线宽度），否则虚线会贴着内容边缘被裁掉
div.rounded-dashed {
padding: 2px;
background-image:
linear-gradient(to right, #999 0, #999 6px, transparent 6px, transparent 12px),
linear-gradient(to right, #999 0, #999 6px, transparent 6px, transparent 12px),
linear-gradient(to bottom, #999 0, #999 6px, transparent 6px, transparent 12px),
linear-gradient(to bottom, #999 0, #999 6px, transparent 6px, transparent 12px);
background-position: top left, top right, left top, right top;
background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-clip: padding-box;
border-radius: 8px;
}
为什么不用 repeating-linear-gradient？
repeating-linear-gradient 看似更简洁，但它在拐角处无法自动适配弧度——四条线仍是独立绘制，交界处仍会露底或重叠。而手动拆成四个 linear-gradient 并精确控制 background-position，才能让每条线在到达圆角前就自然收尾，视觉上形成连续虚线环。
- Chrome/Firefox 对
repeating-linear-gradient的起点偏移计算不一致，容易造成某一边虚线错位 - 如果元素宽高不固定（比如
max-width: 100%），repeating-版本在 resize 时可能出现虚线段长度突变 - 手动写的四梯度方案兼容性更好，连 IE11 都能 fallback 到纯色边框（只要不依赖
background-clip）
圆角半径变化时虚线怎么对齐？
虚线段长度和圆角半径没有数学绑定关系，但人眼对「角部虚线是否中断」极其敏感。实际调试中建议：
立即学习“前端免费学习笔记（深入）”；
- 圆角
border-radius ≤ 4px：用8px总周期（如 4px 实线 + 4px 间隙），避免角部空隙过大 - 圆角
≥ 8px：周期拉到16px或20px，否则虚线段在直边部分会显得太密 - 始终让虚线「实线段长度 ≥ 圆角半径 × 0.6」，否则角部容易看出明显断点
- 真要动态适配，得用 JS 监听
border-radius变化并重算background-size，但绝大多数场景没必要
真正难的不是写出这四行 gradient，而是调出人眼觉得「自然」的段长、间隙和圆角组合——多试两组数值比查文档管用。
