border属性必须同时指定宽度、样式、颜色三要素才生效；最简写法为border:1px solid #333；单边边框应使用border-top等方向性属性；border-color支持1–4值顺时针赋色。
border 属性必须写全三要素才能生效
单独设 border-color 或只写 border-width，边框根本不会显示。浏览器要求同时指定宽度、样式、颜色，缺一不可。最简写法是：border: 1px solid #333 —— 这里 1px 是宽度，solid 是样式（不能写成 "solid" 或 solid()），#333 是颜色。
常见错误包括：
- 写成
border-color: red; border-width: 2px;却漏掉border-style，结果什么也不显示 - 用
border: none后又想单独改颜色，但border-color在border-style: none下无效 - 在重置样式（如
* { border: 0 }）后忘记给目标元素重新声明完整border
border-style 可选值只有 7 种，dashed 和 dotted 容易混淆
border-style 的合法值是固定的：none、hidden、solid、dashed、dotted、double、groove（以及对应的 ridge、inset、outset）。其中 dashed 是短横线，间隙固定；dotted 是圆点，但多数浏览器实际渲染为方点（尤其在小尺寸下），并非真正圆形。
使用注意：
立即学习“前端免费学习笔记（深入）”；
-
dotted在border-width ≤ 2px时可能退化成虚线或不可见，建议最小用3px -
double要求border-width ≥ 3px才能分出内外两条线，否则显示为单线 -
groove/ridge依赖颜色对比和浏览器主题，跨平台表现不稳定，生产环境慎用
单边边框要用方向性属性，别滥用 border
要只给上边加边框，应该用 border-top: 2px solid #007bff，而不是写 border: 2px solid #007bff 再试图“覆盖”其他三边。后者会增加冗余计算，且容易因层叠顺序出错。
更灵活的写法：
- 单边独立控制：
border-left-width: 1px+border-left-style: dashed+border-left-color: #6c757d - 简写合并：
border-bottom: 1px dashed #6c757d - 想清除某一边？直接设
border-right: none，不要用border-right-width: 0—— 后者仍保留样式和颜色，可能干扰继承
border-color 支持多值语法，但顺序不能错
border-color 可以接受 1–4 个值，按「上 右 下 左」顺时针展开，类似 padding/margin：
border-color: #f00; /* 四边同色 */ border-color: #f00 #00f; /* 上下 #f00，左右 #00f */ border-color: #f00 #00f #0f0; /* 上 #f00，左右 #00f，下 #0f0 */ border-color: #f00 #00f #0f0 #000; /* 上右下左逐个指定 */
这个语法只对 border-color 有效，border-width 和 border-style 也支持同样规则，但 border 简写不支持多值颜色（即不能写 border: 1px solid #f00 #00f）。
容易踩的坑：
- 误以为
border-color: red green是“上红右绿”，其实是“上红下红，左绿右绿” - 在 CSS 预处理器中拼接变量时，漏掉空格导致值合并（如
#f00#00f被当做一个颜色） - 透明边框用
transparent没问题，但别用rgba(0,0,0,0)—— 某些旧版 Safari 渲染异常
边框看似简单，但 border-style 的存在性约束、方向性属性的优先级、多值语法的隐含顺序，这三点在调试时最容易卡住人。
