如何在CSS中设置元素边框颜色_border-color美化页面
border-color用于设置元素边框颜色，需配合border-style和border-width使用，可统一或单独设置四边颜色，支持关键字、十六进制、RGB、HSL等颜色格式，常用于按钮悬停、输入框聚焦、卡片分组等场景以提升视觉效果和用户体验。
在CSS中，border-color 属性用于设置元素边框的颜色，是美化页面视觉效果的重要手段之一。通过合理使用边框颜色，可以让按钮、卡片、输入框等元素更突出、更有层次感。
基本用法：设置边框颜色
你可以为元素的四条边框统一设置颜色，也可以分别设置每条边的颜色。
• 统一设
置四边颜色：
border-color: red; —— 四条边均为红色
border-color: red green blue yellow; —— 顺序为上、右、下、左
border-top-color: red;border-right-color: green;border-bottom-color: blue;border-left-color: yellow;
结合 border-style 和 border-width 使用
仅设置 border-color 不会显示边框，必须先定义边框样式和宽度。
示例：
border-width: 2px;border-style: solid;border-color: #007BFF;
或者简写为：
border: 2px solid #007BFF;
推荐使用简写形式，更简洁高效。
使用场景与美化技巧
合理运用边框颜色可以提升界面美观度和用户体验。
• 按钮悬停效果：鼠标移入时改变边框颜色，增强交互感。
button:hover { border-color: #0056b3; }
用户点击输入框时高亮边框，提示当前操作区域。
input:focus { border-color: #28a745; outline: none; }
用不同颜色边框区分内容模块，如蓝色表示普通卡片，红色表示警告信息。
支持的颜色值格式
border-color 支持所有CSS颜色表示方式：
- 关键字：
red,blue,transparent等 - 十六进制：
#ff0000,#007BFF - RGB/RGBA：
rgb(255, 0, 0),rgba(0, 123, 255, 0.5) - HSL/HSLA：
hsl(0, 100%, 50%)
使用 transparent 可创建“隐形边框”，避免布局跳动。
基本上就这些。掌握 border-color 的用法，配合样式和交互，能让页面看起来更专业、更细腻。不复杂但容易忽略细节。
