第二種跟第一種很相似，不過有一點進步，在border-image上，橫向循環背景圖片。

下面我們來講第三種方式如何優雅地實現斜條紋背景框。

只需幾行，隨用隨改，你想發生什麼故事都可以。

.linear-border {
height: 5rem;
border-style: solid;
border-width: .2rem;
border-image: repeating-linear-gradient(-45deg,
#E8544D,
#E8544D 10px,
white 10px,
white 20px,
#75ADF8 20px,
#75ADF8 30px,
white 30px,
white 40px);
border-image-slice: 5;
}

下面來逐個分析這兩個知識點 repeating-linear-gradient 和 border-image-slice。

1. repeating-linear-gradient

總共有兩個參數

第一個參數表示線性漸變的方向，可以是角度( -45deg )也可以是方向( left top )。

第二個參數表示起點顏色和終點顏色。指定漸變的起止顏色，由顏色值、停止位置（可選，使用百分比指定）組成。

我的例子裡面就是通過第一個參數設定了-45度，然後從0-40px每10px依次變換藍，白，紅，三種顏色。

2. border-image-slice

這個屬性顧名思義，就是很簡單的直譯，邊框圖片切片，把邊框圖片四分五裂，再重新安置，變形，其方位規則符合CSS普遍的方位規則（與margin，padding等或border-width一致），上右下左順時針。如果你只聲明瞭 border-image-source 和 border-width 或 border-image-width 沒有任何切片，則整個未切割的圖像將放置在元素的四個角上，縮放到指定的寬度。如果你想實現背景圖片循環展示就得藉助於border-image-slice，它的主要功能是鎖定背景圖片的四個角，然後在其他區域根據參數循環剩餘部分，如果想填充內容部分，選擇fill即可。

推薦閱讀：