一篇文章带你了解CSS 边框(Border)

开发 前端
CSS边框属性允许您定义框的边框区域。边框可以是预定义的样式,例如实线,双线,虚线等,[也可以是图像],定义边框的样式(border-style),颜色(border-color)和厚度(border-width)。

[[378009]]

一、CSS边框属性

CSS边框属性允许您定义框的边框区域。边框可以是预定义的样式,例如实线,双线,虚线等,[也可以是图像],定义边框的样式(border-style),颜色(border-color)和厚度(border-width)。

1. 边框宽度属性(border-width)

border-width属性指定边框区域的宽度。用于同时设置元素边框的所有四个边的厚度。

例:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"
  5. <title>项目</title> 
  6. <style> 
  7. p.one { 
  8. border-style: solid; 
  9. border-width: 5px; 
  10. border-color: red; 
  11.  
  12. p.two { 
  13. border-style: solid; 
  14. border-width: 5px 10px; 
  15. border-color: red; 
  16.  
  17. p.three { 
  18. border-style: solid; 
  19. border-width: 5px 10px 15px; 
  20. border-color: red; 
  21.  
  22. p.four { 
  23. border-style: solid; 
  24. border-width: medium 10px thick 15px; 
  25. border-color: red; 
  26. </style> 
  27. </head> 
  28. <body style="background-color: aqua;"
  29. <p class="one"
  30. <strong>单值语法:</strong>:单个值设置所有四个边框的宽度。</p> 
  31.  
  32. <p class="two"
  33. <strong>二值语法:</strong>第一个值设置上下边框的宽度,第二个值设置左右边框的宽度。</p> 
  34.  
  35. <p class="three"
  36. <strong>三值语法</strong>:第一个值设置顶部边框的宽度,第二个值设置左右边框的宽度,第三个值设置 底部边框的宽度。</p> 
  37.  
  38. <p class="four"
  39. <strong>四值语法</strong>:每个值都按上,右,下和左的顺序分别设置边框的宽度。</p> 
  40.  
  41. <p> 
  42. <strong>注意</strong>:必须在 
  43. <code> border-width </code>属性之前声明 
  44. <code> border-style </code>属性。元素必须具有边框,然后才能设置边框的宽度。</p> 
  45. </body> 
  46. </html> 

:如果border-width缺少或未指定属性值,border-width则将使用的默认值(medium)。

2. 边框样式属性 (border-style)

该border-style属性设置框边框的样式。它是用于设置元素边框所有四个侧面的线型的简写速记属性。

该border-style属性可采取以下值之一:none,hidden,dashed,dotted,double,groove,inset,outset,ridge和solid 。

例:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"
  5. <title>项目</title> 
  6. <style> 
  7. p { 
  8. border-width: 3px; 
  9.  
  10. p.none { 
  11. border-style: none; 
  12.  
  13. p.dotted { 
  14. border-style: dotted; 
  15.  
  16. p.dashed { 
  17. border-style: dashed; 
  18.  
  19. p.solid { 
  20. border-style: solid; 
  21.  
  22. p.double { 
  23. border-style: double
  24.  
  25. p.groove { 
  26. border-style: groove; 
  27.  
  28. p.ridge { 
  29. border-style: ridge; 
  30.  
  31. p.inset { 
  32. border-style: inset; 
  33.  
  34. p.outset { 
  35. border-style: outset; 
  36. </style> 
  37. </head> 
  38. <body style="background-color: aqua;"
  39. <h1>各种边框样式。</h1> 
  40. <p class="none">无边框</p> 
  41. <p class="dotted ">虚线边框</p> 
  42. <p class="dashed ">虚线边框</p> 
  43. <p class="solid">实心边框</p> 
  44. <p class="double">双边框</p> 
  45. <p class="groove">凹槽边框</p> 
  46. <p class="ridge">山脊边界</p> 
  47. <p class="inset">插入边框</p> 
  48. <p class="outset ">起始边界</p> 
  49. </body> 
  50. </html> 

3. 边框颜色属性 (border-color)

该border-color属性指定color框的边框。这也是用于设置元素边框所有四个侧面的颜色的简写属性。

例:

  1. <style> 
  2. p.one { 
  3. border-style: solid; 
  4. border-color: #ff0000; 
  5.  
  6. p.two { 
  7. border-style: solid; 
  8. border-color: #ff0000 #00ff00; 
  9.  
  10. p.three { 
  11. border-style: solid; 
  12. border-color: #ff0000 #00ff00 #0000ff; 
  13.  
  14. p.four { 
  15. border-style: solid; 
  16. border-color: #ff0000 #00ff00 #0000ff #ff00ff; 
  17. </style> 

注意:

border-color如果单独使用该属性,则该属性将不起作用。

使用border-style属性首先设置边框。

二、边框简写速记属性

该border CSS属性是设置一个或多个单独的边框属性的速记属性border-style,border-width和border-color在一个单一的规则。

例:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"
  5. <title>CSS边框速记属性</title> 
  6. <style> 
  7. p { 
  8. border: 5px solid #ff4500; 
  9. </style> 
  10. </head> 
  11. <body style="background-color: aqua;"
  12. <p>这是一个段落.</p> 
  13. </body> 
  14. </html> 

 

如果在设置border速记属性时忽略或未指定单个border属性的值,则将使用该属性的默认值(如果有)。

注:

border-color在设置元素的边框时,如果缺少属性值或未指定属性值(例如border: 5px solid;),则该元素的color属性将用作的值border-color。

在此例中,边框将是宽度为5px的黑色实线。

例:

  1. <style>       
  2. p { 
  3. color: black; 
  4. border: 5px solid; 
  5. </style> 

 

但是,在有border-style属性的情况下,省略该值将不会显示任何边框,因为这个时候border-style属性 的默认值为none。

在下面的例子中,将没有边框:

  1. <style> 
  2.   p { 
  3.      border: 5px #00ff00; 
  4. </style> 

三、总结

本文基于CSS基础,介绍了关于边框的相关属性,定义边框的宽度,边框的颜色,边框的样式。对每一种属性通过案例详细的讲解。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

 

 

责任编辑:姜华 来源: 前端进阶学习交流
相关推荐

2021-04-07 06:11:37

Css前端CSS定位知识

2021-05-31 09:30:36

Css前端CSS 特效

2020-11-03 19:18:28

CSS对齐文本

2020-11-17 11:10:21

CSS选择器HTML

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平台

2023-08-01 14:34:12

HTMLCSS

2022-02-15 09:31:43

透明度CSS

2023-06-28 15:04:59

CSSHTML

2021-05-20 09:02:59

CSS单位长度

2022-03-04 09:31:41

CSS前端属性选择器

2021-01-29 18:41:16

JavaScript函数语法

2021-06-04 09:56:01

JavaScript 前端switch

2020-11-10 10:48:10

JavaScript属性对象

2021-02-02 18:39:05

JavaScript

2022-12-14 08:03:27

CSS变量前端

2020-12-18 05:40:37

CSS clearHtml

2020-11-27 08:51:29

CSSOpacity透明度

2023-09-06 14:57:46

JavaScript编程语言

2021-05-18 08:30:42

JavaScript 前端JavaScript时
点赞
收藏

51CTO技术栈公众号