CSS边框必须同时指定宽度、样式、颜色三要素，缺一不可；border-style默认为none，漏写如solid则边框不显示，例如border: 1px #333无效，正确写法为border: 1px solid #333。

border 三个值缺一不可，漏掉样式就看不到边框

很多人写 border: 1px #333; 或 border-color: #333;，结果边框不显示——因为 border-style（比如 solid、dashed）没设，浏览器默认是 none。必须同时指定宽度、样式、颜色，顺序可变，但样式不能省。

• border: 1px solid #333; ✅ 正确
• border: 1px #333; ❌ 缺样式，无效
• border-style: solid; border-width: 1px; ❌ 缺颜色，多数浏览器仍不渲染

细线边框用 border 还是 box-shadow？看设备和缩放

想实现视觉上「0.5px」或「1px 但不失真」的细边框，border 在高 DPI 屏幕或页面缩放时可能变粗或模糊；box-shadow 更稳定。

• 常规场景（桌面端标准缩放）：直接用 border: 1px solid #ccc;
• 需要适配 Retina 屏或支持 pinch-zoom 的移动端：改用 box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
• 注意：若同时用了 border 和 box-shadow，得确认 box-sizing: border-box;，否则尺寸会撑大

虚线边框别只靠 border，四边不对称时容易错位

用 border: 2px dashed #3498db; 统一四边没问题，但一旦分开写 border-top、border-bottom，虚线起始位置可能错开，尤其在不同浏览器里。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 避免单独设某一边为 dashed 而其他边为 none —— 有些浏览器会把 none 边当占位，导致按钮高度不一致
• 要不对称，优先用 outline + outline-offset 叠加一层虚线，它不参与盒模型计算
• 或者用 background-image: repeating-linear-gradient(...) 控制虚线节奏，但兼容性略低（IE11 不支持）

圆角按钮边框被截断？检查 overflow 和 border-radius 顺序

给按钮加了 border-radius: 8px; 却发现边框直角还在，常见原因是父容器有 overflow: hidden;，或者按钮本身被某些 UI 框架重置了 -webkit-appearance。

立即学习“前端免费学习笔记（深入）”；

• 确保按钮没有 overflow: hidden; 父级，否则圆角部分会被裁掉
• 某些浏览器（尤其 Safari）对原生 button 的 border-radius 渲染不一致，加一句 -webkit-appearance: none; 强制解除原生样式
• 如果用了 border-image 或伪元素画边框，border-radius 对它们无效，得单独处理伪元素的 border-radius

边框不是单纯“画条线”，它牵扯盒模型、渲染层、焦点逻辑和响应式行为。改一个 border 前，先想清楚：这是装饰线，还是交互反馈线，或是无障碍焦点轮廓——目的不同，实现路径就完全不同。