HTML5中设实线边框最直接方式是CSS的border: 1px solid #000;，其中solid为必需关键词；手机端需应对高DPR导致的1px模糊问题，推荐伪元素+scale(0.5)方案。
HTML5 中用 border 设置实线边框最直接的方式
HTML5 本身不提供新边框语法，实线边框仍靠 CSS 的 border 属性实现。关键不是“HTML5 怎么设”，而是“在 HTML5 文档中如何用现代方式写 CSS 边框”。最常用写法是：
border: 1px solid #000;
其中 solid 就是实线关键词，不可省略或拼错（比如写成 solide 或 full 都无效）。
-
1px建议从1px起手，但手机端需注意物理像素问题（见下条） - 颜色可为
#000、rgb(0,0,0)或语义化颜色名如black - 若只要某一边有边框，用
border-top、border-left等更精准控制
手机端 border 显示变粗或模糊的根源
这不是 HTML5 的锅，而是高 DPR（设备像素比）屏幕把 1px 渲染成了 2–3 物理像素，导致视觉上发虚或过粗。常见现象：iOS Safari 下明明写了 border: 1px solid #ccc，看起来却像 2px 灰边。
- 别依赖
transform: scaleY(0.5)这类 hack，容易引发点击区域偏移或文字锯齿 - 更稳妥的是用
border-image配合 1px 宽的 SVG 或 base64 图片，但成本高 - 主流方案是用
viewport缩放 +border微调，例如设置initial-scale=1后，对需要细边的元素加border: 0.5px solid #ddd（部分安卓 Chrome 支持小数 px） - 兼容性兜底：用伪元素
::after绘制 1px 线，配合transform: scale(0.5)仅作用于伪元素，不影响主内容布局
border-style: solid 在 Flex / Grid 布局里失效？检查这些点
实线边框“看不见”，往往不是 solid 写错了，而是被其他样式覆盖或父容器裁剪。
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
overflow: hidden，而子元素边框刚好在裁剪边缘外 - Flex 子项默认
min-width: auto，可能挤压边框空间；加min-width: 0再试 - Grid 中若用
grid-template-columns: 1fr 1fr且内容超宽，边框可能被隐式轨道撑开或重叠 - 检查是否误用了
outline（它不占布局空间，也不支持圆角和单独方向控制）
移动端调试时边框突然消失的典型原因
真机或模拟器里边框“闪一下就没了”，大概率是 CSS 加载顺序或媒体查询干扰。
- 确认没有全局重置样式表（如 normalize.css）把
border设为none，尤其注意button、input等表单元素的默认边框被清空 - 媒体查询中写了
@media (max-width: 768px) { * { border: none !important; } }这类暴力规则 - 使用了 CSS-in-JS 库（如 styled-components），动态生成的 class 名可能未正确注入，导致样式丢失
- Vue/React 中条件渲染组件时，
v-if或{show &&} 导致边框所在节点未挂载，而非样式问题实际项目里，边框问题八成出在设备适配和样式层叠上，而不是
solid本身。写完记得在真机 Safari 和 Chrome for Android 上各点开开发者工具，看 computed 样式里border是否真的生效、宽度是否被覆盖、颜色是否被 opacity 影响。
