用 border 设置 HTML5 元素实线边框最直接，因 HTML5 本身不支持样式，border 可一次性定义 solid 线型、粗细和颜色，且兼容性好、语义明确、布局稳定。
用 border 设置 HTML5 元素的实线边框最直接
HTML5 本身不提供边框设置能力，所有样式必须靠 CSS 控制。border 是最常用、最稳妥的方式，它能一次性定义线型（solid）、粗细（如 1px）和颜色（如 #333）。不要试图用 outline 或 box-shadow 替代——它们不占布局空间，也不响应鼠标事件区域变化，容易引发点击错位或响应区缺失。
常见写法示例：
div {
border: 2px solid #007bff;
}
这行代码等价于分别写 border-width、border-style、border-color，但更简洁，浏览器解析也无差异。
border-width 支持多值语法，可单独控制四边粗细
当需要上边 3px、右边 1px、下边 2px、左边 0 的不等宽实线时，border-width 的四值语法比重复写四条 border-top-width 等更高效，也更易维护。
立即学习“前端免费学习笔记（深入）”；
-
border-width: 3px 1px 2px 0;→ 顺时针：上 右 下 左 -
border-width: 2px 4px;→ 上下 2px，左右 4px -
border-width: 1px;→ 四边统一 1px
注意：border-style 和 border-color 同样支持多值语法，但必须保证 border-style 至少有一个值是 solid，否则实线不会渲染（比如写成 border-style: none solid dashed，只有右边是实线）。
避免用 border-image 实现实线——它不是为简单实线设计的
border-image 适合复杂纹理或渐变边框，但对纯色实线来说，它引入额外加载开销、缩放失真风险，且在低分辨率屏幕或缩放比例非 100% 时容易出现像素断裂或模糊。更关键的是，它的兼容性虽已较好（Chrome 16+、Firefox 15+），但 IE 完全不支持，而很多内网系统仍需兼容 IE11。
如果只是要不同粗细的实线，坚持用 border + px 单位即可。单位用 em 或 rem 虽可响应字号变化，但会意外放大边框（比如父元素 font-size: 20px，border-width: 0.1em 就变成 2px），反而难控精度。
移动端要注意 border 在高 DPR 屏幕下的“发虚”问题
在 iPhone、MacBook 等设备上，CSS 像素和物理像素不是 1:1，1px 边框常被渲染成模糊的 2 物理像素带，看起来像 1.5px。这不是 bug，而是浏览器抗锯齿策略导致的视觉误差。
解决方法不是盲目加粗，而是用 transform: scaleY(0.5) 配合 transform-origin 拉伸后压缩，或更稳妥地使用 border-image 加载 1x/2x 切图——但仅限于必须保持“视觉 1px”场景。绝大多数业务中，直接用 border: 1px solid #ddd 即可，用户几乎不会察觉，强行优化反而增加维护成本。
真正该警惕的是：别在 flex 或 grid 容器里给子项设 border 后又用 margin 调间隙——border 会参与盒模型计算，容易导致布局偏移或换行异常，此时优先考虑 gap 或 outline（仅作视觉提示时）。
