css边框属性详细总结

Posted 2020-08-06

  元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线.

边框的样式 (border-style)

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示（当然，样式确实控制着边框的显示），而是因为如果没有样式，将根本没有边框。

a,css 边框样式分为10种不同的非inherit样式：如下：

统一风格

1，none 无边框

2，solid 直线边框

3，dashed 虚线边框

4，dotted 点状边框

5，double 双虚线边框

6，groove 凸槽边框

7，ridge 垄状边框

8，inset  inset边框

9，outset outset边框

10，inherit继承

b,定义单边样式 分为以下4种样式

单独风格

1，border-bottom-style 下边边框样式

2，border-top-style   上边边框样式

3，border-left-style   左边边框样式

4，border-right-style   右边边框样式

因此这两种方法是等价的：

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

边框宽度（border-width）

统一风格

border-width属性值：

1，thin 细边框

2，medium中等边框

3，thick粗边框

4，px固定值边框

5，inherit 继承

p {

border-style: solid; 

border-width: thick;

}

等同于

p {

border-style: solid;

 border-width: 5px;

}

单边宽度

p {

border-style: solid;

border-width: 15px 5px 15px 5px;

}

也等同于

p {

  border-style: solid;

  border-top-width: 15px;

  border-right-width: 5px;

  border-bottom-width: 15px;

  border-left-width: 5px;

  }

边框颜色（border-color）

统一风格

p {

  border-style: solid;

  border-color: blue red;

  }

单独风格

1，border-top-color    上边框颜色

2，border-bottom-color  下边框颜色

3，border-left-color   左边框颜色

4，border-right-color  有边框颜色

h1 {

  border-style: solid;

  border-color: black;

  border-right-color: red;

  }

本文出自 “crazy_sir” 博客，请务必保留此出处http://douya.blog.51cto.com/6173221/1846094