1818IP-服务器技术教程,云服务器评测推荐,服务器系统排错处理,环境搭建,攻击防护等

当前位置:首页 - 网站技术 - html/css - 正文

君子好学,自强不息!

如何用css设置div的边框颜色

2022-03-10 | html/css | gtxyzz | 572°c
A+ A-


每日笔记,用css设置网页里的的边框颜色 ,网页里边框颜色设置,如何设置div的边框颜色

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;
}

以下为实例输出

one红色实线边框77ISP

tow绿色实线边框77ISP

three蓝色点状边框77ISP

特定边框的颜色

border-color 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

以下为输出结果

上红、右绿、下蓝、左黄

HEX 值

边框的颜色也可以使用十六进制值(HEX)来指定:

实例

  border-style: solid;
  border-color: #ff0000; /* 红色 */
}

77ISP

RGB 值

或者使用 RGB 值:

实例

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

以下为输出结果

77ISP

HSL 值

也可以使用 HSL 值:

实例

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

以下为输出结果

77ISP



本文来源:1818IP

本文地址:https://www.1818ip.com/post/116.html

免责声明:本文由用户上传,如有侵权请联系删除!

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。