关于CSS的边框样式(border)详细详解

我是2站的小小编,今天给大家带来CSS的边框样式(border)详解
详解如下:

CSS 中的边框是围绕着元素内容和内边距的一条或多条线段,您可以自定义这些线段的样式、宽度以及颜色。您可以通过下面几个属性分别定义边框的样式、宽度和颜色:

  • border-style:设置边框的样式,例如实线、虚线等;
  • border-width:设置边框的宽度(厚度);
  • border-color:设置边框的颜色;
  • border:上面三个边框属性的缩写。

1. border-style

border-style 属性用来设置元素中所有边框的样式,或者单独为某个边框设置样式,其语法格式如下:

border-style: border-top-style border-right-style border-bottom-style border-left-style;

border-style 属性的可选值如下:

描述
none 无边框
hidden 隐藏边框,与 “none” 类似
dotted 定义点状虚线边框
dashed 定义虚线边框
solid 定义实线边框
double 定义双实线边框,双实线边框的宽度等于 border-width 的值
groove 定义 3D 凹槽边框,其效果取决于 border-color 的值
ridge 定义 3D 垄状边框,其效果取决于 border-color 的值
inset 定义 3D 嵌入边框,其效果取决于 border-color 的值
outset 定义 3D 突出边框,其效果取决于 border-color 的值
inherit 从父元素继承边框样式

border-style 属性有多种不同的用法:

  • 如果提供全部的四个参数,则会按照上、右、下、左的顺序分别设置边框四个边的样式;
  • 如果提供三个参数,那么第一个参数会作用在上边框,第二个参数会作用在左、右两个边框上,第三个参数会作用在下边框上;
  • 如果提供两个参数,那么第一个参数会作用在上、下两个边框上,第二个参数会作用在左、右两个边框上;
  • 如果只提供一个参数,这个参数将同时作用在四个边框上。

除了可以使用 border-style 属性设置元素的边框样式外,您还可以使用下面的属性分别设置元素上、下、左、右四个边框的样式:

  • border-bottom-style:设置下边框的样式;
  • border-top-style:设置上边框的样式;
  • border-left-style:设置左边框的样式;
  • border-right-style:设置右边框的样式。

【示例】使用 border-style 属性为元素设置边框:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6. width: 100px;
  7. float: left;
  8. margin: 10px;
  9. border-width: 5px;
  10. border-color: red;
  11. text-align: center;
  12. }
  13. .none {
  14. border-style: none;
  15. }
  16. .hidden {
  17. border-style: hidden;
  18. }
  19. .dotted {
  20. border-style: dotted;
  21. }
  22. .dashed {
  23. border-style: dashed;
  24. }
  25. .solid {
  26. border-style: solid;
  27. }
  28. .double {
  29. border-style: double;
  30. }
  31. .groove {
  32. border-style: groove;
  33. }
  34. .ridge {
  35. border-style: ridge;
  36. }
  37. .inset {
  38. border-style: inset;
  39. }
  40. .outset {
  41. border-style: outset;
  42. }
  43. .four {
  44. border-top-style: solid;
  45. border-right-style: double;
  46. border-bottom-style: dashed;
  47. border-left-style: dotted;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <p class=“none”>none</p>
  53. <p class=“hidden”>hidden</p>
  54. <p class=“dotted”>dotted</p>
  55. <p class=“dashed”>dashed</p>
  56. <p class=“solid”>solid</p>
  57. <p class=“double”>double</p>
  58. <p class=“groove”>groove</p>
  59. <p class=“ridge”>ridge</p>
  60. <p class=“inset”>inset</p>
  61. <p class=“outset”>outset</p>
  62. <p class=“four”>four</p>
  63. </body>
  64. </html>

运行结果如下图所示:

113K22251-0
图:border-style 属性演示

2. border-width

border-width 属性用来设置元素中所有边框的宽度,或者单独为某个边框设置宽度,其语法格式如下:

border-width: border-top-width border-right-width border-bottom-width border-left-width;

border-width 属性的可选值如下:

描述
thin 定义较细的边框
medium 默认值,定义中等宽度的边框
thick 定义较粗的边框
length 使用数值加单位的形式设置具体的边框宽度,例如 2px
inherit 从父元素继承边框的宽度

thin、medium、thick 三个关键字并没有固定的值,它们的值取决于浏览器,例如在 Chrome 浏览器中三个关键字的值分别为 1px、3px、5px。

同 border-style 属性相同,border-width 属性同样支持多种不同的用法:

  • 如果提供全部的四个参数,则会按照上、右、下、左的顺序分别设置边框四个边的宽度;
  • 如果提供三个参数,那么第一个参数会作用在上边框,第二个参数会作用在左、右两个边框上,第三个参数会作用在下边框上;
  • 如果提供两个参数,那么第一个参数会作用在上、下两个边框上,第二个参数会作用在左、右两个边框上;
  • 如果只提供一个参数,这个参数将同时作用在四个边框上。

除了可以使用 border-width 属性设置元素的边框宽度外,您还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度:

  • border-bottom-width:设置下边框的宽度;
  • border-top-width:设置上边框的宽度;
  • border-left-width:设置左边框的宽度;
  • border-right-width:设置右边框的宽度。

【示例】使用 border-width 设置边框的宽度:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6. width: 100px;
  7. margin: 5px;
  8. float: left;
  9. border-style: solid;
  10. text-align: center;
  11. }
  12. .one{
  13. border-width: thin medium thick;
  14. }
  15. .two{
  16. border-width: 2px 5px;
  17. }
  18. .three{
  19. border-top-width: 1px;
  20. border-right-width: 2px;
  21. border-bottom-width: 3px;
  22. border-left-width: 4px;
  23. }
  24. .four{
  25. border-width: thin;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <p class=“one”>one</p>
  31. <p class=“two”>two</p>
  32. <p class=“three”>three</p>
  33. <p class=“four”>four</p>
  34. </body>
  35. </html>

运行结果如下图所示:

113K2B10-1
图:border-width 属性演示

3. border-color

border-color 属性用来设置元素中所有边框的颜色,或者单独为某个边框设置颜色,其语法格式如下:

border-color: border-top-color border-right-color border-bottom-color border-left-color;

border-color 属性的可选值如下:

描述
color_name 使用颜色名称来设置边框的颜色,例如 red
hex_number 使用颜色的十六进制值来设置边框的颜色,例如 #ff0000
rgb_number 使用 rgb() 函数设置边框的颜色,例如 rgb(255,0,0)
transparent 默认值,设置边框颜色为透明
inherit 从父元素继承边框的颜色

同 border-style 属性相同,border-color 属性同样支持多种不同的用法:

  • 如果提供全部的四个参数,则会按照上、右、下、左的顺序分别设置边框四个边的颜色;
  • 如果提供三个参数,那么第一个参数会作用在上边框,第二个参数会作用在左、右两个边框上,第三个参数会作用在下边框上;
  • 如果提供两个参数,那么第一个参数会作用在上、下两个边框上,第二个参数会作用在左、右两个边框上;
  • 如果只提供一个参数,这个参数将同时作用在四个边框上。

除了可以使用 border-color 属性设置元素的边框颜色外,您还可以使用下面的属性分别设置元素上、下、左、右四个边框的颜色:

  • border-bottom-color:设置下边框的颜色;
  • border-top-color:设置上边框的颜色;
  • border-left-color:设置左边框的颜色;
  • border-right-color:设置右边框的颜色。

【示例】使用 border-color 设置边框的颜色:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6. width: 100px;
  7. margin: 5px;
  8. float: left;
  9. border-style: solid;
  10. border-width: 5px;
  11. text-align: center;
  12. }
  13. .one{
  14. border-color: green;
  15. }
  16. .two{
  17. border-color: #0000CC;
  18. }
  19. .three{
  20. border-top-color: #009900; /*绿色*/
  21. border-right-color: #FF0000; /*红色*/
  22. border-bottom-color: #330000; /*黑色*/
  23. border-left-color: #0000CC; /*蓝色*/
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <p class=“one”>one</p>
  29. <p class=“two”>two</p>
  30. <p class=“three”>three</p>
  31. </body>
  32. </html>

运行结果如下图所示:

113K234O-2
图:border-color 属性演示

4. border

border 属性是上面介绍的 border-width、border-style、border-color 三种属性的简写,使用 border 属性可以同时定义上述三个属性,语法格式如下:

border: border-width border-style border-color;

其中 border-width 用来设置边框的宽度;border-style 用来设置边框的样式;border-color 用来设置边框的颜色。

【示例】使用 border 属性为元素设置边框:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p{
  6. width: 100px;
  7. float: left;
  8. margin: 5px;
  9. }
  10. .one {
  11. border: 2px solid green;
  12. }
  13. .two {
  14. border: 5px double red;
  15. }
  16. .three {
  17. border: 3px dotted blue;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <p class=“one”>one</p>
  23. <p class=“two”>two</p>
  24. <p class=“three”>three</p>
  25. </body>
  26. </html>

运行结果如下图所示:

113K26440-3
图:border 属性演示

提示:border 属性的三个参数(border-width、border-style、border-color)并不需要遵守固定的顺序,将它们的顺序打乱也是可以的。另外,也可以省略其中的某个参数,例如border: soild red;,省略的参数将被设置为该参数的默认值。

除了可以使用 border 属性统一设置边框的宽度、样式、颜色外,您还可以使用下面的属性分别设置元素上、下、左、右四个边框的宽度、样式、颜色:

  • border-bottom:统一设置下边框的宽度、样式、颜色;
  • border-top:统一设置上边框的宽度、样式、颜色;
  • border-left:统一设置左边框的宽度、样式、颜色;
  • border-right:统一设置右边框的宽度、样式、颜色。

通过组合本节中介绍这些属性,可以实现一些意想不到的效果,例如我们可以通过边框来绘制三角形,示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p {
  6. width: 0px;
  7. margin: 5px;
  8. float: left;
  9.  
  10. }
  11. .top {
  12. border: 50px solid;
  13. border-color: red transparent transparent;
  14. }
  15. .bottom {
  16. border-width: 0 50px 50px;
  17. border-style: solid;
  18. border-color: transparent transparent red;
  19. }
  20. .left {
  21. border-top: 50px solid transparent;
  22. border-left: 50px solid black;
  23. border-right: 50px solid transparent;
  24. border-bottom: 50px solid transparent;
  25. }
  26. .right {
  27. border-width: 50px 50px 50px 0px;
  28. border-style: solid;
  29. border-color: transparent red transparent transparent;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <p class=“top”></p>
  35. <p class=“bottom”></p>
  36. <p class=“left”></p>
  37. <p class=“right”></p>
  38. </body>
  39. </html>

运行结果如下图所示:

113K21E2-4
图:使用边框绘制三角形
© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片