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%。