實現不同樣式效果的DIV邊框

一、邊框樣式

邊框樣式可以通過CSS中的border-style屬性來設置。border-style有以下幾個值可選：

border-style: none;  /* 無邊框 */
border-style: dotted;  /* 點線邊框 */
border-style: dashed;  /* 虛線邊框 */
border-style: solid;  /* 實線邊框 */
border-style: double;  /* 雙線邊框 */
border-style: groove;  /* 3D溝槽邊框 */
border-style: ridge;  /* 3D脊邊框 */
border-style: inset;  /* 3D嵌入邊框 */
border-style: outset;  /* 3D浮雕邊框 */

例如，設置一個紅色實線邊框的DIV可以這樣寫：

div {
  border-style: solid;
  border-width: 1px;
  border-color: red;
}

二、邊框寬度

邊框寬度可以通過CSS中的border-width屬性來設置。border-width有以下幾個值可選：

border-width: thin;  /* 細線邊框 */
border-width: medium;  /* 中等線邊框 */
border-width: thick;  /* 粗線邊框 */
border-width: 1px;  /* 自定義像素寬度 */

例如，設置一個綠色粗線邊框的DIV可以這樣寫：

div {
  border-style: solid;
  border-width: 5px;
  border-color: green;
}

三、圓角邊框

圓角邊框可以通過CSS中的border-radius屬性來設置。border-radius接受一個或兩個長度值，分別表示水平半徑和豎直半徑。

例如，設置一個紅色圓角邊框的DIV可以這樣寫：

div {
  border-style: solid;
  border-width: 1px;
  border-color: red;
  border-radius: 10px;
}

四、陰影邊框

陰影邊框可以通過CSS中的box-shadow屬性來設置。box-shadow接受四個參數，分別為水平偏移量、豎直偏移量、模糊半徑和陰影大小。

例如，設置一個藍色帶有陰影效果的DIV可以這樣寫：

div {
  border-style: solid;
  border-width: 1px;
  border-color: blue;
  box-shadow: 2px 2px 2px #888888;
}

五、漸變邊框

漸變邊框可以通過CSS中的border-image屬性來設置。border-image接受一張圖像、一個定位值和一個用於拉伸的值。

例如，設置一個漸變邊框的DIV可以這樣寫：

div {
  border-style: solid;
  border-width: 10px;
  border-image: linear-gradient(to right, #00ff00, #0000ff) 1;
}