按钮边框颜色生效需同时设置border-style和border-width，因浏览器要求边框“三要素”齐全；border-color单独声明时border-style默认为none，故不显示；支持1–4值顺时针映射四边，可用方向性属性精准控制；禁用已弃用的border-colors，推荐伪元素或box-shadow实现多色效果。
按钮边框颜色不会生效，除非同时设置 border-style 和 border-width —— 这是绝大多数人卡住的第一步。
为什么只写 border-color: red 没反应？
浏览器要求边框“三要素”必须齐全：宽度、样式、颜色。缺任意一个，border-color 就被忽略，视觉上等于没边框。
-
border-color单独声明时，border-style默认为none，此时无论颜色设成什么，都不显示 - 常见错误写法：
button { border-color: #007bff; }→ 无效 - 正确写法（任选其一）：
button { border: 2px solid #007bff; }或button { border-width: 2px; border-style: solid; border-color: #007bff; } - 如果已用
border: none重置过，默认会覆盖后续border-color，必须重新声明完整三要素
border-color 支持 1–4 个值，顺序是上→右→下→左
它不是“随机赋色”，而是严格按顺时针方向映射到四条边，理解这点才能精准控制每一边的颜色。
-
border-color: red;→ 四边都是红色 -
border-color: red blue;→ 上/下 = red，左/右 = blue -
border-color: red blue green;→ 上 = red，左/右 = blue，下 = green -
border-color: red blue green yellow;→ 上=red、右=blue、下=green、左=yellow - 搭配方向性属性更安全：
border-top-color: red; border-right-color: blue;避免顺序记错
想让按钮边框多色渐变或分段？别用 border-colors
border-colors（如 -moz-border-top-colors）是 Firefox 专属旧语法，Chrome / Safari / Edge 均不支持，且已被现代标准弃用。生产环境请绕开。
- 所谓“多色边框”实际是把单边边框拆成多个像素级色带，依赖
border-width值决定色数（如border-width: 5px才能用 5 种颜色） - 即使 Firefox 中也只对
solid样式部分生效，dashed或dotted下行为不可控 - 替代方案更可靠：用伪元素
::before或box-shadow模拟多色效果，或直接切图/svg
按钮边框颜色容易被 color 或 background-color 干扰
按钮的 color 属性会影响文字色，但**也会默认影响边框色**——当 border-color 未显式设置时，浏览器会回退到当前 color 值。
- 例如：
button { color: red; }且未设border-color→ 边框很可能也是红色（取决于 UA 样式） - 同理，
background-color不直接影响边框，但如果边框是transparent或半透，底色会透出干扰观感 - 调试建议：在开发者工具中检查 computed 样式里的
border-color，确认它是否真的来自你写的规则，而非继承或 UA 默认
真正要控制按钮边框，核心就三点：先写 border-style（哪怕只是 solid），再定 border-width（哪怕只是 1px），最后才设 border-color；顺序不能乱，值数要对得上边；别碰已淘汰的 border-colors，它现在只存在于老教程和 Firefox 的兼容层里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
