二维码
搜索 ×

CSS 边框颜色

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 边框颜色

CSS 边框颜色

border-color:该属性用于设置四个边框的颜色。

颜色可以通过以下方式设置：

  • 名称 - 指定颜色名称，如“红色”
  • HEX - 指定十六进制值，如“#ff0000”
  • RGB - 指定 RGB 值，例如“rgb（255,0,0）”
  • HSL - 指定 HSL 值，如 “hsl（0， 100%， 50%）”
  • 透明

注意： 如果未设置border-color，则继承元素的颜色。

1
2
3
4
5
6
7
8
9
10
不同边框颜色的演示：

p.one {  border-style: solid;  
  border-color: red;}  

p.two {  border-style: solid;  
  border-color: green;}  

p.three {  border-style: dotted;  
  border-color: blue;}

结果：

特定边框色

border-color:该属性可以有 1 到 4 个值 （对于 上边框、右边框、下边框和左边框）。

1
2
p.one {  border-style: solid;  
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */}

十六进制值

边框的颜色也可以使用十六进制值 （HEX） 指定：

1
2
p.one {  border-style: solid;  
  border-color: #ff0000; /* red */}

RGB 值

或者使用 RGB 值：

1
2
p.one {  border-style: solid;  
  border-color: rgb(255, 0, 0); /* red */}

HSL 值

您还可以使用 HSL 值：

1
2
p.one {  border-style: solid;  
  border-color: hsl(0, 100%, 50%); /* red */}

您可以在我们的 CSS 颜色章节中了解有关 HEX、RGB 和 HSL 值的更多信息。

推荐教程