CSS 边框颜色 详解
css3基础 2022-05-23 12:02:11小码哥的IT人生shichen
CSS 边框颜色
CSS 边框颜色
border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色：
- name - 指定颜色名，比如 "red"
- HEX - 指定十六进制值，比如 "#ff0000"
- RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
- HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
- transparent
注释：如果未设置 border-color，则它将继承元素的颜色。
示例代码：
演示不同的边框颜色：
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
结果：
红色实线边框
绿色实线边框
蓝色点状边框
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<h1>border-color 属性</h1>
<p>此属性规定四条边框的颜色：</p>
<p class="one">红色实线边框</p>
<p class="two">绿色实线边框</p>
<p class="three">蓝色点状边框</p>
<p><b>注释：</b>border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
特定边框的颜色
border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
示例代码：
p.one {
border-style: solid;
border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
</style>
</head>
<body>
<h1>border-color 属性</h1>
<p>border-color 属性可接受一到四个值（依次对应上、右、下、左边框）：</p>
<p class="one">多色的实线边框</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HEX 值
边框的颜色也可以使用十六进制值（HEX）来指定：
示例代码：
p.one {
border-style: solid;
border-color: #ff0000; /* 红色 */
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: #ff0000; /* 红色 */
}
p.two {
border-style: solid;
border-color: #0000ff; /* 蓝色 */
}
p.three {
border-style: solid;
border-color: #bbbbbb; /* 灰色 */
}
</style>
</head>
<body>
<h1>border-color 属性</h1>
<p>边框颜色也可以使用十六进制值（HEX）指定：</p>
<p class="one">红色实线边框</p>
<p class="two">蓝色实线边框</p>
<p class="three">灰色实线边框</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
RGB 值
或者使用 RGB 值：
示例代码：
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* 红色 */
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* 红色 */
}
p.two {
border-style: solid;
border-color: rgb(0, 0, 255); /* 蓝色 */
}
p.three {
border-style: solid;
border-color: rgb(187, 187, 187); /* 灰色 */
}
</style>
</head>
<body>
<h1>border-color 属性</h1>
<p>边框颜色也可以使用 RGB 值指定：</p>
<p class="one">红色实线边框</p>
<p class="two">蓝色实线边框</p>
<p class="three">灰色实线边框</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
HSL 值
也可以使用 HSL 值：
示例代码：
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* 红色 */
}
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* 红色 */
}
p.two {
border-style: solid;
border-color: hsl(240, 100%, 50%); /* 蓝色 */
}
p.three {
border-style: solid;
border-color: hsl(0, 0%, 73%); /* 灰色 */
}
</style>
</head>
<body>
<h2>border-color 属性</h2>
<p>边框颜色也可以使用 HSL 值指定：</p>
<p class="one">红色实线边框</p>
<p class="two">蓝色实线边框</p>
<p class="three">灰色实线边框</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
您可以在我们的 CSS 颜色 章节中学到有关 HEX、RGB 和 HSL 值的更多知识。
