CSS Border Pic

一、border属性

在CSS中，border属性用于指定边框样式。一个边框由宽度、样式和颜色组成，其中宽度和颜色是必需的，而样式则是可选的。CSS为border属性定义了多种样式，包括solid、dotted、dashed、double、groove、ridge、inset和outset。下面是一个示例：

.example {
  border: 1px solid black;
}

在这个示例中，边框的宽度为1个像素，样式为实线，颜色为黑色。

通过border属性，我们可以给一个元素的四个边分别指定不同的样式和宽度，也可以只指定一条边的样式和宽度。下面是一个给左边框指定样式和宽度的示例：

.example {
  border-left: 2px dashed red;
}

在这个示例中，左边框的宽度为2个像素，样式为虚线，颜色为红色。

二、利用Border创建图形

利用border属性，我们可以轻松地创建一些简单的图形。下面是一些示例：

1、正方形

.square {
  border: 50px solid black;
}

2、圆形

.circle {
  border-radius: 50%;
  border: 50px solid black;
}

3、三角形

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-left-color: red;
}

4、梯形

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 50px solid black;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

5、菱形

.diamond {
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  border: 1px solid black;
}

三、利用Border实现进度条

利用border属性，我们还可以实现进度条的效果。下面是一个示例：

.progress-bar {
  width: 300px;
  height: 20px;
  border: 1px solid black;
  position: relative;
}

.progress-bar-inner {
  height: 100%;
  background-color: #00ff00;
  position: absolute;
  left: 0;
  top: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  transition: width 0.5s;
}

.progress-bar-inner.done {
  width: 50%;
}

在这个示例中，我们创建了一个宽为300px、高为20px的外层容器，并设置了1px的实线边框。内层容器的高度为100%，背景色为绿色。当我们为内层容器添加done类时，它的宽度会变成50%。