HTML5实线边框设置方法详解

解决办法很简单：

• 加 display: inline-block 或 display: block
• 或者用 display: inline-flex（兼容性稍低但更可控）
• 避免只靠 vertical-align 调整位置来“补救”边框显示问题

border 的三个核心参数不能省略任意一个

border 是复合属性，展开后对应 border-width、border-style、border-color。浏览器只认完整三元组，哪怕你只想改颜色，也得带上宽度和样式：

• ✅ 正确：border: 2px solid #333
• ✅ 正确（只改颜色，保留原宽和样式）：border-color: #f00
• ❌ 错误：border: #000（浏览器当无效声明处理）
• ❌ 错误：border: solid #000（缺宽度，多数浏览器不渲染）

注意：border-style 必须是 solid、dashed、dotted 等合法值，none 和 hidden 也会导致无边框，别误当成“透明”用。

想让边框“紧贴内容”？优先用 box-sizing: border-box

默认 box-sizing: content-box 下，加 border 会让元素总宽 = width + padding + border，容易撑破容器。初学者常以为“边框变粗了”，其实是盒子变大了。

更符合直觉的做法是统一加：

• *, *::before, *::after { box-sizing: border-box; }（全局重置）
• 或单独给目标元素设：box-sizing: border-box

这样 width: 200px; border: 2px solid #000; 就真等于“内容区 + 边框总共 200px”，而不是“内容区 200px 再加 4px 边框”。

真正容易被忽略的点：border 的渲染依赖于元素是否具有“尺寸”和“渲染流中的占位”。空的