HTML5中border需用CSS设置，最简写法为div{border:1px solid #000;}；平板边框异常多因overflow裁剪、box-sizing未预留空间或高DPI下1px发虚，非HTML5或设备专属问题。
border 属性在 HTML5 中和以前一样直接生效，平板设备无需特殊属性——只要 CSS 正确应用，border-style: solid 就能显示实线边框。
怎么用 CSS 给元素加实线边框
HTML5 本身不提供边框设置能力，必须靠 CSS。最简方式是：
div {
border: 1px solid #000;
}
这等价于分别写：border-width、border-style、border-color。其中 solid 是关键值，表示实线；其他常见值如 dashed、dotted 不会出实线。
- 单独控制某一边：用
border-top、border-left等 - 只设样式不设宽高：
border-style: solid必须配合border-width（哪怕设为0），否则可能不渲染 - 避免用内联
style写太多重复样式，推荐 class 复用
为什么平板上边框“看不见”或“变虚了”
不是 HTML5 或平板专属问题，通常是以下原因：
立即学习“前端免费学习笔记（深入）”；
- 父容器
overflow: hidden裁掉了边框边缘 - 元素本身
width/height过小，或用了box-sizing: border-box但没预留边框空间 - 高 DPI 平板（如 iPad）下，
1px边框被缩放成物理亚像素，看起来发虚或消失 —— 可改用transform: scaleY(0.5)配合border模拟“真正 1px”，或用border-image替代 - 某些安卓 WebView 对
border-radius和border同时存在时渲染异常，可尝试去掉圆角再测试
border 在移动端的兼容性要点
所有现代平板浏览器（Safari、Chrome for Android/iOS）都完全支持 border 及其子属性，但要注意：
-
border-collapse只对有效，且在部分安卓低版本中对
border-spacing表现不一致- 不要依赖
outline当边框用——它不占布局空间，且无法设单边，平板上焦点样式还可能覆盖真实边框- 如果用 Flex 或 Grid 布局，
border本身没问题，但gap会和border共存，别误以为 gap 是边框间隙真正容易被忽略的是：边框是否在视觉稿的“安全区”内，以及是否被 viewport 缩放或 user-scalable 设置干扰。调试时先关掉缩放（
user-scalable=no临时删掉），再检查 computed styles 中的border是否真实计算为 solid + 有宽度。 - 不要依赖
