HTML5中边框必须用CSS的border属性设置，如border: 2px solid #333；border="1"是HTML4过时写法；box-shadow默认覆盖border，可通过负spread-radius、outline或padding解决重叠；border-style:solid不显示需检查width、color和样式覆盖；移动端0.5px边框兼容性差，推荐transform缩放伪元素或box-shadow模拟。
HTML5 中没有直接设置边框的语法，得靠 CSS 的 border
HTML5 本身不处理样式，所谓“设置边框”其实是用 CSS 控制元素外观。必须通过 border 属性定义线型、宽度和颜色，比如：border: 2px solid #333; 才是实线边框的标准写法。仅写 border="1" 是 HTML4 的过时用法，现代浏览器虽可能兼容，但不推荐，且无法指定“实线”或控制阴影行为。
box-shadow 和 border 同时存在时视觉重叠怎么避免
常见现象是阴影盖住边框下半/右边缘，尤其当 box-shadow 的 spread-radius 为正值或 blur-radius 较大时。本质不是“冲突”，而是层叠顺序和绘制逻辑导致视觉干扰：
-
border绘制在元素内容区+内边距+边框自身区域； -
box-shadow默认绘制在 border box 外侧（可溢出），且始终在 border 的上层渲染； - 解决关键是让边框“透出来”——要么缩小阴影扩散范围，要么给边框留出物理空间。
推荐做法：
– 阴影用偏移 + 小模糊，如 box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2);（负 spread-radius 能收紧边缘）；
– 或加 outline 替代部分边框需求（outline 不占布局空间，且默认在 shadow 上层）；
– 真需保留两者时，给元素设 padding，让 border 与 shadow 之间有空白隔离。
用 border-style: solid 但没显示？检查这三点
写了 solid 却看不到实线，大概率卡在这几个地方：
- 漏写了
border-width：CSS 中border-style单独存在无效，必须搭配非零border-width（哪怕写border-width: 1px）； - 颜色透明或与背景同色：确认
border-color不是transparent或和父容器背景一致； - 被其他样式覆盖：比如
outline: none不影响 border，但某些重置 CSS（如* { border: 0 }）会干掉所有 border，需提高选择器优先级或用!important临时验证。
移动端高 DPI 下实线变虚？用 border-width: 0.5px 要谨慎
在 Retina 屏上设 1px 边框常被渲染成模糊的 2px，有人尝试用 0.5px 模拟“真正细线”，但这只在部分 iOS Safari 支持，Chrome/Android WebView 多数会向下取整为 0px 导致消失。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: scaleY(0.5)缩放伪元素画的线（兼容性好）； - 或改用
box-shadow: 0 0 0 0.5px #000模拟（注意 shadow 不受设备像素比影响）； - 干脆接受
1px在高清屏上的物理粗细变化——用户感知远不如错位或闪烁明显。
实线边框看着简单，但和阴影共存、跨设备渲染、CSS 层叠优先级这几个点，稍不注意就白调十分钟。
