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