border-style: double 要求宽度≥3px才能渲染出两条线，2px时浏览器退化为单实线；必须显式声明颜色，不支持单边设置或与border-radius共存，否则失效或降级。
border-style: double 是唯一原生支持双线边框的 CSS 属性，但必须满足宽度 ≥ 3px 且不能和 border-radius 共存——否则多数浏览器会退化为单线。
为什么 border: 2px double black 看起来像单线？
双线边框对最小宽度有硬性要求：设成 1px 或 2px 时，浏览器渲染引擎无法在像素级空间内画出两条平行线加中间留白，直接 fallback 成单实线。这不是 bug，是规格限制。
- 可靠起始值是
3px（如border: 3px double #000） - 颜色必须显式声明，
double不继承父级文本色，省略颜色会导致无边框 - 所有四边必须统一用
double，不能只写border-bottom: double—— 单边double在 Chrome/Firefox 中无效，仅 Safari 旧版部分支持
border-radius 和 double 冲突怎么办？
原生 double 边框不支持圆角，border-radius 对它完全无效。想保留圆角又要有双线感，只能放弃原生 double，改用组合方案：
- 用
border: 2px solid #000+box-shadow: 0 0 0 2px #000模拟“内实线 + 外描边”，两者都响应border-radius - 若需明显间隙，把
box-shadow偏移加大：比如box-shadow: 0 0 0 2px #000, 0 0 0 6px #ccc，间隙就是 4px - 别用
outline替代外层——outline不随圆角弯曲，边缘仍是直角
复古风格双线常踩的兼容性坑
所谓“复古”，往往指粗线、高对比、带点机械感的双线，比如 4–6px 黑白双线。但这类设计在高清屏（Retina / 2x）上容易糊或发虚：
- 避免用
0.5px或1.5px这类非整数，box-shadow尤其敏感；坚持用整数像素（4px、6px） -
double在 IE8 及更早版本中不支持，但现代项目基本可忽略；若真要保 IE8，只能用两层嵌套容器模拟 - 表格里用
double要配border-collapse: collapse，否则单元格双线错位——这点和图片无关，但有人会误套表格方案
真正难的不是“怎么画两条线”，而是让两条线在不同设备、不同缩放比例、不同圆角需求下保持稳定视觉节奏。越想复古，越得盯住像素精度和渲染一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
