CSS揭祕之《邊框圖像》

若是咱們想把一圖應用到邊框而非背景，就像下面的這樣效果

可能最容易的方法就是兩層標籤，外層標籤設置背景圖片，內層標籤設置背景色爲白色就達到了效果，但是若是隻用一層標籤呢，怎麼辦？
其實思路是在背景圖片之上， 再疊加一層純白的實色背景
代碼以下：

div {
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white, white),
            url(../images/stone-art.jpg);
            background-size: cover;
            background-clip: padding-box, border-box;
            background-origin: border-box;
        }

或者再簡寫一下就是：

div {
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box, url(../images/stone-art.jpg) border-box 0 / cover; 
        }

具體效果見連接
再擴展一下，若是要實現以下所示的邊框圖像，像信封一下的效果，怎麼辦

其實有兩種方式

1. 使用repeating-linear-gradient

div {
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white, white) padding-box,
            repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,
            #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;

            max-width: 20em;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }

具體效果見連接

1. 使用border-image

div {
            padding: 1em;
            border: 16px solid transparent;
            border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,
            #58a 0, #58a 3em, transparent 0, transparent 4em);

            max-width: 20em;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }

具體效果見連接
可是使用border-image 方法存在一些問題

1. 每當咱們改變 border-image-slice 時， 都須要同時修改 borderwidth 來讓它們相互匹配

2. 因爲咱們不能在 border-image-slice 屬性中使用 em 單位， 只能把
   邊框厚度指定爲像素單位

3. 條紋的寬度須要在色標的位置信息中寫好， 所以咱們在改變條紋寬
   度時， 須要修改四處

先暫時寫到這裏後續再補充