CSS border-color属性,设置边框颜色的五种方法

边框颜色border-color属性

border-color属性可以用于设置HTML元素的边框颜色。在设置border-color属性之前,请先确保该元素设置了border-style,即边框的样式(否则浏览器渲染的时候可能无边框可着色——个人理解,仅供参考)。


设置边框颜色的五种方法

这里所说的五种方法是为边框设置颜色值的五种方法,为边框设置颜色的方法主要还是通过border-color属性,如果通过border属性也是可以的。这五种方法如下表:

颜色设置方法描述
颜色名CSS内置的预定义的颜色名,如blue、skyblue、green、orange、pink等等
RGB通过RGB颜色值来设置,如rgb(150,150,150)
HEX十六进制值,如#87ceeb
HSL色相饱和度,如hsl(50,100%,50%)
transparent透明

提示:颜色的选取可以参考本站的编程工具:拾色器,如果需要将RGB值和HEX16进制值进行转换,可参考:RGB和HEX16进制颜色值转换器


边框颜色设置实例代码,及在线编辑器

<p class='f1'>通过颜色名设置边框颜色</p>
<p class='f2'>通过RGB设置边框颜色</p>
<p class='f3'>通过HEX设置边框颜色</p>
<p class='f4'>通过HSL设置边框颜色</p>
<p class='f5'>通过transparent设置边框颜色</p>

<style>
  .f1{border-style:solid;border-color:skyblue;}
  .f2{border-style:solid;border-color:rgb(150,150,150);}
  .f3{border-style:solid;border-color:#ff5566;}
  .f4{border-style:solid;border-color:hsl(50,100%,50%);}
  .f5{border-style:solid;border-color:transparent;}
</style>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.