詳解CSS border-image屬性

一、border-image簡介

CSS邊框是一個重要的元素，可以通過它來給網站增加美觀度和品質感。而在CSS中，可以通過border-image屬性來設置元素的邊框圖片和顯示方式。

border-image屬性分為九部分，分別是：border-image-source（圖片地址）、border-image-slice（圖片切片）、border-image-width（圖片寬度）、border-image-outset（圖片邊距）、border-image-repeat（圖片重複方式）和四個縮寫屬性。

二、border-image源

border-image-source屬性用於定義邊框圖片的來源，支持所有的URL值、圖片資源和線性漸變。

    .border-image-source {
      border-image-source: url(border.png);
    }

或者使用線性漸變作為邊框圖片源：

    .border-image-source {
      border-image-source: linear-gradient(to bottom right, #4CAF50, #FF5722);
    }

三、圖片切片

border-image-slice屬性定義將邊框圖片分為九個區域以及如何調整這些區域的大小。語法如下：

    .border-image-slice {
      border-image-slice: number|[number]%;
    }

可以使用px為單位設置切片大小，同時可以通過設置百分比來調整邊框圖像大小：

    .border-image-slice {
      border-image-slice: 30;
      border-image-slice: 30% 20% 10% 5%;
    }

四、圖片寬度

border-image-width屬性定義邊框圖片的寬度，也可以設置百分比來調整大小並應用到每個切片。語法如下：

    .border-image-width {
      border-image-width: number|[number]%;
    }

可以分別給每個方向設置邊框圖片寬度：

    .border-image-width {
      border-image-width: 30;
      border-image-width: 30% 20% 10% 5%;
      /*top, right, bottom, left*/
      border-image-width: 30% 20% 10%;
      /*top, right and left, bottom*/
      border-image-width: 30% 20%;
      /*top and bottom, right and left*/
    }

五、邊距

border-image-outset屬性定義邊框圖片的超出邊框線的距離，使用負值會將邊框圖片縮小以適應邊框大小。

    .border-image-outset {
      border-image-outset: number|[number]%;
    }

不過多重疊的仍然會保持原來的形狀，推薦給不同的邊使用不同的值以避免這種情況。

六、重複方式

border-image-repeat屬性定義如何重複邊框圖像。語法如下：

    .border-image-repeat {
      border-image-repeat: stretch|repeat|round;
    }

默認情況下，邊框圖像是在邊框區域內重複，使用「stretch」值會拉伸圖像以適應邊緣區域。而「repeat」將按圖片大小重複。

“round”會拉伸圖像以適合邊緣區域，並嘗試在重複之前進行四捨五入縮小，以使重複之後的寬度恰好適合邊緣區域。

七、CSS border-image縮寫屬性

除了以上的獨立屬性外，CSS 還提供了一種縮寫屬性，可以將所有單獨屬性合在一起。

    .border-image {
      border-image: url(border.png) 30 round;
    }

可以通過縮寫屬性的方式一次設置所有的屬性值。

八、CSS border-radius對圓角的設置

CSS border-radius屬性是用於設置元素的圓角的屬性。使用border-radius屬性與border-image屬性可以輕鬆的達到各種符合設計要求的效果。

使用border-radius 設置圓角：

    .border-radius {
      border-radius: 10px;
    }

也可以多邊形圓角效果：

    .border-radius {
      border-top-left-radius: 20px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 40px;
    }

九、小結

CSS border-image是一種非常實用的屬性，使用它可以輕鬆的設置元素的邊框圖片、邊框圖案和切片等效果。除了border-image屬性，border-radius屬性也是一個非常實用的元素設置上圓角效果的屬性。