使用border-color可为边框设置不同颜色，通过1至4个值按顺时针顺序定义上右下左颜色，或用border-top-color等属性单独设置某一边，需配合border-style和border-width生效，常用于突出内容或装饰布局。
为边框设置不同颜色，核心在于使用 CSS 的 border-color 属性，并结合方向控制实现多样化样式。这个属性允许你为元素的上、右、下、左四个边分别指定颜色，也可以统一设置。
1. 使用 border-color 设置四边不同颜色
你可以通过给 border-color 传入 1 到 4 个颜色值，来分别控制四条边的颜色。取值顺序遵循顺时针规则：上 → 右 → 下 → 左。
• 单个值：border-color: red; —— 四边都是红色• 两个值：
border-color: red blue; —— 上下为红色，左右为蓝色• 三个值：
border-color: red blue green; —— 上为红色，左右为蓝色，下为绿色• 四个值：
border-color: red blue green yellow; —— 上红、右蓝、下绿、左黄
2. 单独设置某一边的边框颜色
如果只想修改某一条边的颜色，可以直接使用带方向的属性：
•border-top-color: red;•
border-right-color: blue;•
border-bottom-color: green;•
border-left-color: yellow;
这种方式更清晰，适合只需要调整某一侧颜色的场景。
3. 结合 border-width 和 border-style 使用
border-color 不会单独生效，必须配合边框样式或宽度。如果未设置 border-style（如 solid、dashed），边框将不可见。
border: 2px solid;
border-color: red blue green yellow;
或者直接写成：
border: 2px solid;
border-top-color: red;
border-right-color: blue;
4. 在实际布局中的应用技巧
利用不同颜色边框可以突出重点内容、制作装饰性卡片或模拟阴影效果。
例如创建一个顶部高亮的提示框：.alert {
border: 1px solid #ddd;
border-top-color: #f00;
}
这样只让上边框为红色，视觉上更聚焦。
基本上就这些。掌握 border-color 的多值语法和方向属性，就能灵活控制每一边的颜色，提升界面表现力。
