最直接的实线边框写法是border: solid 1px，但需配合box-sizing: border-box和清除margin/padding才能真正紧贴边缘，避免因盒模型或默认间距导致视觉偏移。
border: solid 1px 是最直接的实线边框写法
HTML5 本身不提供边框设置能力，实际由 CSS 控制。要让元素显示紧贴边缘的实线边框，border 是首选属性。常见错误是只写 border: 1px solid #000 却忽略盒模型影响——这会导致元素实际尺寸变大（边框会向外撑开），视觉上“不贴边”。
实操建议：
- 始终显式声明三要素：
border-width、border-style、border-color，例如border: 1px solid #333 - 若需保持原有宽高不变，加
box-sizing: border-box，这样边框和内边距会向内压缩，而非向外扩张 - 避免仅用
border-top等单边写法却不设其他三边，否则可能因浏览器默认样式（如border: none）导致渲染不一致
为什么有时候实线边框看起来“离得远”？检查 margin 和 padding
所谓“不贴边”，90% 不是边框问题，而是外边距或内边距干扰。比如 标签自带默认 margin，即使加了 border，也会在边框外空出白边。
排查步骤：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具（F12）选中元素，看
Computed面板里的margin和padding值是否非零 - 重置常用标签默认间距：
* { margin: 0; padding: 0; }（慎用于生产环境）或针对性写p, h1, ul { margin: 0; } - 注意
line-height或字体下沉也可能造成底部“空隙”，此时可对父容器设font-size: 0后再重置子元素字号
border-image 或 outline 不能替代 border 实现紧贴实线
有人尝试用 outline 模拟边框，但它不占布局空间、无法单独控制某一边、且默认有偏移（outline-offset 默认为 0，但部分浏览器仍会轻微错位）；border-image 则需要图片资源，且复杂度高，对纯色实线完全是杀鸡用牛刀。
关键区别：
-
outline不触发重排，位置不可控，outline: 1px solid red可能被裁切或模糊 -
border-image必须配border-style: solid才生效，且一旦使用，border-color就失效，调试成本陡增 - 真正“紧贴”的唯一可靠路径：老老实实用
border+box-sizing: border-box+ 清除内外边距
移动端或高清屏下实线发虚？用 1px 边框的兼容写法
在 Retina 屏上，border: 1px solid #000 渲染出来常是 2 物理像素宽，显得粗；而强行设 0.5px 又不被所有浏览器支持（iOS Safari 支持，Android 多数不支持）。
稳妥方案：
- 优先用
transform: scaleY(0.5)缩放伪元素边框（如::after），并设transform-origin: top防偏移 - 或使用媒体查询判断设备像素比：
@media (-webkit-min-device-pixel-ratio: 2) { .border { border-width: 0.5px; } } - 更现代的做法：改用
box-shadow: 0 0 0 1px #000，它不受box-sizing影响，且在高倍屏下更稳定
最容易被忽略的一点：border 的“紧贴”依赖于整个盒模型上下文。哪怕只漏掉一行 margin: 0 或忘了 box-sizing，都可能让那根实线悄悄漂移一两个像素——这种偏差在设计稿对齐时特别致命。
