CSS 边框颜色 (border-color)


CSS 边框颜色

border-color 属性用于设置四个边框的颜色。可以通过以下方式设置颜色:

  • name - 指定颜色名,比如 "red"
  • HEX - 指定十六进制值,比如 "#ff0000"
  • RGB - 指定 RGB 值,比如 "rgb(255,0,0)"
  • HSL - 指定 HSL 值,比如 "hsl(0, 100%, 50%)"
  • transparent - 透明

注释:如果未设置 border-color,则它将继承元素的颜色。

演示不同的边框颜色:

  1. p.one {
  2. border-style: solid;
  3. border-color: red;
  4. }
  5. p.two {
  6. border-style: solid;
  7. border-color: green;
  8. }
  9. p.three {
  10. border-style: dotted;
  11. border-color: blue;
  12. }

结果:

红色实线边框

绿色实线边框

蓝色点状边框

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.one {
  6. border-style: solid;
  7. border-color: red;
  8. }
  9. p.two {
  10. border-style: solid;
  11. border-color: green;
  12. }
  13. p.three {
  14. border-style: dotted;
  15. border-color: blue;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <h1>border-color 属性</h1>
  21. <p>此属性规定四条边框的颜色:</p>
  22. <p class="one">红色实线边框</p>
  23. <p class="two">绿色实线边框</p>
  24. <p class="three">蓝色点状边框</p>
  25. <p><b>注释:</b>border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。</p>
  26. </body>
  27. </html>

特定边框的颜色

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.one {
  6. border-style: solid;
  7. border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <h1>border-color 属性</h1>
  13. <p>border-color 属性可接受一到四个值(依次对应上、右、下、左边框):</p>
  14. <p class="one">多色的实线边框</p>
  15. </body>
  16. </html>

HEX 值

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.one {
  6. border-style: solid;
  7. border-color: #ff0000; /* 红色 */
  8. }
  9. p.two {
  10. border-style: solid;
  11. border-color: #0000ff; /* 蓝色 */
  12. }
  13. p.three {
  14. border-style: solid;
  15. border-color: #bbbbbb; /* 灰色 */
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <h1>border-color 属性</h1>
  21. <p>边框颜色也可以使用十六进制值(HEX)指定:</p>
  22. <p class="one">红色实线边框</p>
  23. <p class="two">蓝色实线边框</p>
  24. <p class="three">灰色实线边框</p>
  25. </body>
  26. </html>

RGB 值

或者使用 RGB 值:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.one {
  6. border-style: solid;
  7. border-color: rgb(255, 0, 0); /* 红色 */
  8. }
  9. p.two {
  10. border-style: solid;
  11. border-color: rgb(0, 0, 255); /* 蓝色 */
  12. }
  13. p.three {
  14. border-style: solid;
  15. border-color: rgb(187, 187, 187); /* 灰色 */
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <h1>border-color 属性</h1>
  21. <p>边框颜色也可以使用 RGB 值指定:</p>
  22. <p class="one">红色实线边框</p>
  23. <p class="two">蓝色实线边框</p>
  24. <p class="three">灰色实线边框</p>
  25. </body>
  26. </html>

HSL 值

也可以使用 HSL 值:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.one {
  6. border-style: solid;
  7. border-color: hsl(0, 100%, 50%); /* 红色 */
  8. }
  9. p.two {
  10. border-style: solid;
  11. border-color: hsl(240, 100%, 50%); /* 蓝色 */
  12. }
  13. p.three {
  14. border-style: solid;
  15. border-color: hsl(0, 0%, 73%); /* 灰色 */
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <h2>border-color 属性</h2>
  21. <p>边框颜色也可以使用 HSL 值指定:</p>
  22. <p class="one">红色实线边框</p>
  23. <p class="two">蓝色实线边框</p>
  24. <p class="three">灰色实线边框</p>
  25. </body>
  26. </html>

您可以访问本站的 CSS 颜色 章节中学到有关 HEX、RGB 和 HSL 值的更多知识。

分类导航