HTML无border属性，须用CSS控制；border简写须按“宽度→样式→颜色”顺序，缺一不可；单边属性同理；border-radius作用于border外边缘，大边框宽配小圆角会压扁；高DPI下推荐用px保边框稳定。
HTML 本身没有 border 属性，所有边框样式必须通过 CSS 控制；直接写 <div border="1"> 在现代浏览器中完全无效，且是过时的 HTML 3.2 遗留写法。
border 简写属性怎么写才不漏掉关键值
border 是复合属性，必须按「宽度 → 样式 → 颜色」顺序书写，三者缺一不可（颜色可省略但会默认为 currentColor，容易误判）：
border: 2px solid #333;
常见错误：
- 只写
border: 1px;→ 样式缺失，边框不显示 - 写成
border: solid #666 1px;→ 顺序错，整个声明被忽略 - 用
border: 1px dashed;却没设颜色 → 边框可能看不见（尤其在浅背景上）
只给某一边加边框，别用 border-top 这种写法？
要用 border-top、border-right 等单边属性，但注意它们也是复合属性，同样要带全三个值：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
border-top: 1px solid #eee;
误区：
- 以为
border-top: 1px;就够了 → 缺少样式，无效 - 混用简写和单边：先写
border: 1px solid #000;，再写border-top: 2px dashed red;→ 会覆盖整条边框，不是“叠加” - 想清除某一边却写
border-top: none;→ 正确，但border-top: 0;不起作用（0 像素仍需指定样式）
border-radius 圆角和 border 冲突吗
不冲突，但渲染优先级有细节影响：
-
border-radius作用于 border 的外边缘，圆角是“切掉”边框直角部分 - 如果
border是虚线（dashed）或点线（dotted），圆角处可能断开或显示不均 —— 这是浏览器渲染限制，不是 bug - 当
border-width很大（如 >20px）且border-radius较小时，圆角可能被“压扁”，建议让border-radius≥border-width - 不要对
input或button直接设border-radius后忽略overflow: hidden→ 圆角内内容（如聚焦 outline）可能溢出
真正难的是在缩放、高 DPI 屏幕或 CSS 变量动态更新时保持边框视觉一致性；比如用 rem 设 border-width 会随根字体变化，而多数设计系统要求边框粗细绝对稳定 —— 这时候该用 px 或 em 配合 font-size 锁定。
