CSS Border Width

一、border-width的基本使用

border-width属性是控制边框的粗细，该属性常用于设置border-style和border-color属性后，进行边框的定制化。border-width属性可取下述值：

border-width: thin;
border-width: medium;
border-width: thick;
border-width: length;
border-width: initial;
border-width: inherit;

以上取值，thin、medium、thick均是直接赋予边框粗细值，而length，则可以赋予一个具体数值，例如0.5px、1.5em等等，initial表示使用默认值，inherit表示从父元素继承值。

我们可以用以下代码示例来进行演示：

div {
  border-style: solid;
  border-width: thin;
}

上述代码会将<div>元素的边框设置为实线，宽度为“thin”。

二、使用border-top、border-right、border-bottom、border-left单独设置边框粗细

除了使用border-width属性来设置整个边框的宽度外，也可以使用border-top、border-right、border-bottom、border-left四个属性来单独设置边框粗细。

我们可以用以下代码示例来进行演示：

div {
  border-top-width: 1px;
  border-right-width: 2px;
  border-bottom-width: 3px;
  border-left-width: 4px;
}

上述代码会将<div>元素的上边框宽度设置为1px，右边框宽度设置为2px，下边框宽度设置为3px，左边框宽度设置为4px。

三、使用border-width设置多重边框

在CSS中，我们可以使用border-style、border-color、border-width等属性，来实现定制化的边框。其中还有一个很有趣的用法，就是使用border-width来实现多重边框的效果。我们可以用以下代码示例来进行演示：

div {
  border-style: solid;
  border-width: 10px;
  border-color: #f00;
}

div:before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-style: solid;
  border-width: 20px;
  border-color: #000;
}

div:after {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  border-style: solid;
  border-width: 30px;
  border-color: #00f;
}

上述代码会在一个<div>元素内叠加三个边框，形成多重边框的效果。

四、使用border-image属性设置边框

除了使用border-width、border-style、border-color属性进行边框的定制外，我们还可以使用border-image属性进行边框的定制。border-image属性可以通过一张图片，来实现边框的一系列详细操作。

我们可以用以下代码示例来进行演示：

div {
  border-width: 10px;
  border-style: solid;
  border-image: url(border.png) 30 round;
}

上述代码会将<div>元素的边框改为由“border.png”这张图片构成的，宽度为10px，重复方式为round，其中30是图片切割的参数，单位为像素（px）。

五、在边框上增加圆角

除了边框的常规定制化外，有时候我们还需要在边框的角落上增加圆角。CSS提供了border-radius属性，来实现圆角效果。我们可以用以下代码示例来进行演示：

div {
  border: 2px solid #f00;
  border-radius: 50px;
}

上述代码会将<div>元素的边框改为2像素的红色实线，同时增加50像素的圆角效果。