CSS 基础学习-049 使用HEX值、RGB值和HSL值设置边框颜色

hrs 提交于 2021/09/04 - 07:58 , 周六

边框颜色也可以使用十六进制值(HEX)指定, 或者使用 RGB 值,也可以使用 HSL 值。

实例代码:

<!doctype html>
<html>
  <head>
    <title>border-color 颜色属性</title>
    <meta charset="utf-8">
    <style>
    p{  
      width:300px;
    }   

      .one{
          border-style:solid;
          border-color:#ff0000;/*红色*/
      }
      .two{
          border-style:solid;
          border-color:rgb(31,100,0);/*绿色*/
      }
      .three{
          border-style:solid;
          border-color:hsl(0,0%,73%);/*灰色*/
      }


    </style>
  </head>
  <body>
    <h1>border-color 属性</h1>
    <p class="one">HEX值颜色边框</p>
    <p class="two">RGB值颜色边框</p>
    <p class="three">HSL值颜色边框</p>
  </body>
</html>

运行效果:

css-049.png

 

标签