border-color介绍
css border-color属性用来定义边框的颜色。此属性可以有一到四个值，各种情况如下：
- 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
- 如果只提供一个，将用于全部的四边。
- 如果提供两个，第一个用于上、下，第二个用于左、右。
- 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
- 如果border-width等于0或border-style设置为none，本属性将被忽略。
注意：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。
border-color属性值
css border-color属性的取值，可以使用十六进制颜色值，也可以使用颜色名称
| 值 | 说明 |
|---|---|
| color | 指定背景颜色。在CSS颜色值查找颜色值的完整列表 |
| transparent | 指定边框的颜色应该是透明的。这是默认 |
| inherit | 指定边框的颜色，应该从父元素继承 |
<##ads_in_article_manong##>
border-color实例
设置p元素四个边框颜色
<!DOCTYPE html>
<html>
<head>
< >http://www.manongjc.com/article/1199.html</ >
<style>
p.one{
border-style:solid;
border-color:#0000ff;
}
p.two{
border-style:solid;
border-color:#ff0000 #0000ff;
}
p.three{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff;
}
p.four{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class=\"one\">One-colored border!</p>
<p class=\"two\">Two-colored border!</p>
<p class=\"three\">Three-colored border!</p>
<p class=\"four\">Four-colored border!</p>
<p><b>Note:</b> The \"border-color\" property does not work if it is used alone. Use the \"border-style\" property to set the borders first.</p>
</body>
</html>
继续阅读与本文标签相同的文章
-
未来十年，最为吃香的4个大学专业，毕业后就是香饽饽！
2026-05-14栏目： 教程
-
还不会制作填充地图，试试这种方法，2分钟搞定，让你秒变大神
2026-05-14栏目： 教程
-
顺丰自研机器人惊艳亮相，化身“快递小哥”亮绝活，盯上万亿市场
2026-05-14栏目： 教程
-
女生“主动”与你分享这3个秘密？520％偷偷喜欢你，臭弟弟冲鸭
2026-05-14栏目： 教程
-
这4类大学专业很吃香，市场人才紧缺，毕业后前景很好！
2026-05-14栏目： 教程