HTML5中边框必须用CSS的border属性实现，最稳妥写法是border: 1px solid #000；需注意高DPI屏适配、表单元素UA样式覆盖及box-sizing等隐藏影响因素。
HTML5 本身不提供“设置边框”的语法，边框必须用 CSS 控制；所有现代浏览器（包括 iOS Safari、Android Chrome、Windows Edge）都支持 border 实线样式，无需特殊 hack。
用 border 写实线边框最稳妥
HTML5 文档中，<div>、<code><p></p>、<input> 等元素的边框只能靠 CSS 的 border 属性实现。最基础也最兼容的写法是：
border: 1px solid #000;
其中：
• 1px 是宽度，可换成 2px、0.5rem 等，但避免用 0 或负值（部分 Android WebView 渲染异常）
• solid 是线型，明确表示实线；不要用 inset、outset 等三维样式，它们在跨平台下表现不一致
• #000 是颜色，支持十六进制、rgb()、hsl()、甚至 currentcolor（继承父级文字色，适合主题切换）
移动端高 DPI 屏幕下边框变细或消失？
在 iPhone、高端安卓机上，1px 物理像素可能被缩放到 0.5 个 CSS 像素，导致边框“看不见”或模糊。这不是 HTML5 问题，而是 CSS 像素与设备像素比（dpr）不匹配：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: scaleY(0.5)+transform-origin: top模拟 0.5px 边框（仅适用于底部/顶部边框） - 更通用的做法：检测 dpr 后动态写
border-width，例如 dpr=2 时设为0.5px（Chrome / Safari 支持，旧版 UC 不支持） - 保守方案：统一用
1px，并接受它在高分屏上略粗——用户感知远小于“边框缺失”
表单控件（<input>、<select></select>）边框不听使唤？
原生表单元素自带 UA 样式，不同系统渲染差异大。比如 iOS Safari 默认给 <input> 加了圆角和阴影，直接写 border 可能被覆盖：
- 务必加
appearance: none;（配合-webkit-appearance: none;）去除默认样式 - 显式重置
outline: none;，否则聚焦时出现双线（尤其在桌面 Chrome） - 若需保留原生交互感，建议只改
border-color和border-width，不动border-radius（iOS 默认是5px） - 注意：某些 Android 浏览器对
appearance: none支持不全，可加background: transparent;防止背景遮盖边框
真正麻烦的不是怎么写实线，而是哪些地方会“悄悄吃掉”你的 border：box-sizing 是 content-box 还是 border-box、父容器 overflow 是否裁剪、是否被其他规则用 !important 覆盖——这些比语法本身更容易让边框消失。
