边框不显示的主因是border-style未设置，默认为none。必须同时指定宽度、样式、颜色且顺序正确；单边边框需含样式；box-shadow和outline非真正边框；border参与盒模型计算。
边框不显示，八成是 border-style 没设——它默认为 none，哪怕写了颜色和宽度也白搭。
为什么写了 border 却看不见边框
不是代码写错，而是浏览器根本没渲染：HTML 元素默认没有边框，div 的 border 初始值是 medium none currentColor，重点在 none。
- 只写
border-width: 2px或border-color: #333→ 边框不会出现 - 写了
border: 1px #000 solid→ 顺序错，老 IE 可能忽略整个声明 - 父容器有
overflow: hidden，而边框刚好超出边界 → 被裁掉，看起来像“消失” - 元素是
display: inline（比如没设宽高的span套着div）→ 边框存在但不占布局空间，容易误判
border 简写必须带齐三要素
宽度、样式、颜色缺一不可，且顺序固定：border: <width> <style> <color>。
- ✅ 正确写法：
border: 1px solid #000、border: 2px dashed rgba(0,0,0,0.5) - ❌ 错误写法：
border: 1px #000 solid（顺序颠倒）、border: solid #000（缺宽度） - 颜色推荐用十六进制（如
#333），比red或rgb(51,51,51)更稳，兼容性好、无歧义 - 想让边框随字体缩放？用
border-width: 0.0625em，1em = 当前font-size
只想给某一边加边框，别用 border 覆盖全边
border-top、border-right 这类单边属性本身也是简写，同样要带样式，否则无效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅
border-top: 2px dotted #666→ 上边框生效 - ❌
border-top-width: 2px单独用 → 不会显示，因为没设border-top-style - 要“三边有边框、底边没有”？先写
border: 1px solid #ccc，再覆盖border-bottom: none（不是0） - 注意：
border-bottom: 0和border-bottom: none效果不同 —— 前者只是宽度为 0，样式仍为solid；后者才是彻底移除
别把 outline 或 box-shadow 当边框用
它们看着像边框，但行为完全不同，混用容易在交互、打印、响应式或 overflow: hidden 场景下翻车。
-
outline不占布局空间、不能分方向、不支持border-radius，且默认只在聚焦时出现 -
box-shadow是投影，打印时可能不出现，overflow: hidden会裁掉它，语义上也不是边框 - 真需要渐变边框？用
background-image+border: 2px solid transparent+background-clip: padding-box - 圆角搭配边框没问题：
border-radius: 4px会自动让纯色border跟着弧度走，但box-shadow模拟的“边框”在圆角处容易发虚
最常被忽略的点：边框参与盒模型计算。设了 border 后元素总宽高会增加，如果没配 box-sizing: border-box，内容区域会被挤窄——这不是 bug，是 CSS 规范本来就这样。
