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; 就能清晰分离。
