HTML5元素实线边框需用CSS的border属性，如border: 1px solid #000;，其中solid表示实线；漏写线型会导致无边框；单边可用border-top等；背景与边框重叠属规范行为，可通过background-clip调整。
用 border 设置 HTML5 元素的实线边框
HTML5 本身不提供边框设置能力，所有边框都靠 CSS 的 border 属性控制。最基础写法是：border: 1px solid #000;，其中 solid 就表示实线——不是虚线（dashed）、点线（dotted）或双线（double）。
常见错误是只写 border: 1px #000;，漏掉线型，此时浏览器会按默认值（通常是 none）渲染，结果就是“没边框”。
-
border-width可以是thin/medium/thick或具体像素值（推荐用 px，兼容性好） -
border-color支持颜色名、十六进制、rgb/rgba；透明边框可用transparent - 若只需单边实线，用
border-top、border-left等更精准，避免重置其他三边
边框和背景重叠时的显示逻辑
默认情况下，border 在元素内容区（content）外、内边距（padding）内绘制，而 background 默认铺满到 border 区域边缘（即包括 padding 和 border），所以看起来像“重叠”。这不是 bug，是 CSS2.1 规范定义的行为。
真正影响视觉是否“压住”的关键，在于 background-clip 和 box-sizing：
立即学习“前端免费学习笔记（深入）”；
-
background-clip: border-box;（默认）→ 背景延伸至边框外沿 → 边框“浮在”背景上，但可能被半透背景盖住 -
background-clip: padding-box;→ 背景只到 padding 内沿，不覆盖 border 区 → 边框完全可见，与背景分离 -
box-sizing: border-box;会让 width/height 包含 border 和 padding，影响布局，但不改变重叠关系
例如：一个 div 设了 background: rgba(0,0,0,0.1); border: 2px solid #333;，如果觉得边框发虚，大概率是因为半透背景在 border 上“晕染”，这时加一句 background-clip: padding-box; 就能清晰分离。
解决边框被背景“吃掉”的实战技巧
所谓“边框被背景盖住”，通常出现在两种场景：一是用了 background-image 且图片尺寸/定位不当；二是用了 border-radius + 半透明背景，导致圆角处边框模糊。
- 对纯色背景，优先检查是否误设了
background-clip: content-box;——这会让背景缩进到 content 区，border 完全露白，反而像“断开” - 对渐变或图片背景，加
background-origin: padding-box;确保背景起点对齐 padding 区，避免错位遮挡 border - 圆角边框搭配透明背景时，
border本身不会模糊，但抗锯齿会让边缘显得软；可尝试加backface-visibility: hidden;或transform: translateZ(0);强制硬件加速来改善渲染精度
移动端或高 DPI 屏幕下实线边框变虚怎么办
在 Retina 屏或 zoom=110% 的 Windows 浏览器里，1px solid 经常渲染成 2 物理像素宽，看起来发虚或偏粗。这不是 CSS 写错了，是设备像素比（dpr）导致的。
可靠解法不是调 border-width，而是用 transform: scaleY(0.5) 配合伪元素模拟：
.sharp-border {
position: relative;
}
.sharp-border::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
border-top: 1px solid #000;
transform: scaleY(0.5);
transform-origin: top;
}
注意：该方案只适用于单边；四边都需要时，得用四个伪元素或改用 box-shadow 模拟（如 box-shadow: 0 0 0 1px #000;），后者在部分安卓 WebView 中兼容性略差。
真正难调的从来不是“怎么画一条线”，而是这条线在不同设备、不同缩放、不同背景组合下的稳定表现——多测 dpr=2/3 的真机，比死磕一个 CSS 声明管用得多。
