CSS边框属性

CSS中border相关属性可定义元素边框样式、粗度、颜色等信息。

边框样式 Border Style

border-style属性可定义元素的边框表现的样式，例如是实线、或是虚线等等。

border-style取值	说明	示例
dotted	定义出由圆点构成的虚线	A dotted border.
dashed	定义出有短实线构成的虚线	A dashed border.
solid	定义出实线边框	A solid border.
double	定义出双线边框	A double border.
groove	定义出内凹效果的实线边框	A groove border.
ridge	定义出外凸效果的实线边框	A ridge border.
inset	定义出内嵌效果的边框	An inset border.
outset	定义出外凸效果的边框	An outset border.
none	不设置边框，即边框粗细为0	No border.
hidden	定义一个看不见的边框	A hidden border.
mix	定义一个混合样式的边框	A mixed border.

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

运行一下

---

边框粗度 Border Width

border-width可用来定义元素四边的边框线粗度。粗度的取值，可以设置具体的数值加单位（如px、pt、cm、em等），或者使用三种预设值thin、medium、thick。

border-width还可以针对元素的四边分别设置边框粗度，如下例所示，依次对应上、右、下、左四个方向的边框。

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

/* 上、右、下、左 */
p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

运行一下

边框颜色 Border Color

border-color属性是用来设置元素四边的边框颜色。

颜色取值可被设置成：

• 颜色名 - 比如“black”
• Hex - 比如“#46acb6”
• RGB - 比如“rgb(51,51,51)”
• 透明度

与设置边框粗细一样，设置边框颜色，也可以四个方向的边框分别设置，依次是上、右、下、左。

p.one {
    border-style: solid;
    border-color: tomato;
}

p.two {
    border-style: solid;
    border-color: green;
} 

/* 上、右、下、左 */
p.three {
    border-style: solid;
    border-color: tomato green blue yellow;
} 

运行一下

---

如果不设置边框颜色，该元素的边框颜色则会继承使用该元素的color属性的值。

---

边框 - 设置单独方向的边框设置

有很多情况下，元素四边的边框的样式需要设置成不同样式。在CSS中，上边框（top）、下边框（bottom）、左边框（left）、右边框（right可如下进行分别设置。

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

运行一下

当然，也可以用border-style这个属性直接实现。不过这有点复杂，如下所示。

如果border-style有4个值：
border-style: dotted solid double dashed;（上边框取值dotted、右边框取值solid、下边框取值double、左边框取值dashed）

如果border-style有3个值：
border-style: dotted solid double;（上边框取值dotted、右边框和左边框都取值solid、下边框取值double）

如果border-style有2个值：
border-style: dotted solid;（上边框和下边框取值dotted、左边框和右边框取值solid）

如果border-style有1个值：
border-style: dotted;（四边边框都取值dotted）

边框 - 使用border属性来大收割

洒家是个粗人，关于border的属性都已经介绍了好几个，主要有：

• border-style（必要）
• border-width
• border-color

洒家觉得这比较麻烦，因此洒家决定只用border属性来杂糅实现上述三类属性，如下：

/* 分别是 width style color */
p {
    border: 5px solid #46acb6;
}

运行一下

---

上述的"border: width取值 style取值 color取值;"是很常用的一种写法，例如"border: 1px solid red;"这样就很常用；当然，如果非要写成"border: red solid 1px;"也行，但是因为不常用，所以极其不推荐这种写法。洒家就是更喜欢"border: 1px solid red;"这种写法。

---

设置圆角的边框

border-radius属性可以用来将边框的直角设置成圆角，该属性的取值即为圆角的半径。

p.round1 {
    border: 2px solid Tomato;
    border-radius: 8px;
}

/* 左上角、右上角、右下角、左下角 */
p.round2 {
    border: 2px solid Tomato;
    border-radius: 2px 5px 8px 12px;
}

运行一下