連續圖片邊框

2.png

大家看到這張圖 一開始的想法是怎么去實現呢
1.可以使用div+div來實現，外div設置背景圖和padding 內div放置內容、設置背景顏色和padding即可達到效果

<div class="something">
    <div>
        I have a nice stone art border,don't i look pretty
    </div>
</div>
.something{
  background: url(1.png);
  background-size: cover;
  padding:1em;
  width:200px;
}
.something>div{
  background: white;
  padding:1em;
}  

但這種實現方法并不是最佳的，這不僅需要混合樣式，而且需要額外增加一個html并不是一個理想的辦法。
那我們如何只使用一個div來實現這種效果呢

我們可以使用漸變+圖片+clip+origin來實現

<div class="something">
    I have a nice stone art border,don't i look pretty
</div>
.something{
    background: linear-gradient(white,white),url(1.png);
    border:1em solid transparent;
    background-size: cover;
    padding:1em;
    width:200px;
    background-clip: padding-box,border-box;
    background-origin: border-box;
}

首先，我們使用background來制作2種背景，排前面的z-index值大點，用透明的border來實現邊框，當我不用clip 和origin時，此時，padding部分顏色和border部分顏色都是白色，本來應該還有圖片，當時被遮在下面了

3.png

這時候我們把背景顏色包住的范圍改變下，即改變clip屬性，使白色來包住padding+content中的東西，而背景圖片可以影響border，

background-clip: padding-box,border-box;

加上這一條屬性后，距離我們想要的效果很接近了

5.png

為什么會這樣子呢，因為background的開始平鋪的點是以padding的左上為（0，0）點，所以 我們看到的效果都是平鋪后的效果，我們把背景圖片起始點改變成border-box即可以達到我們想要的效果

6.png

將部分代碼合并，可以減少大量代碼，不過顯示效果有點不同

.something{
    background: linear-gradient(white,white) padding-box,
                url(1.png) border-box 0 / cover;
    border:1em solid transparent;
    padding:1em;
    width:200px;
}

7.png

邊框可以使用圖片來顯示，也可以使用漸變色來生成

.something{
    width:200px;
    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 / 5em 5em; 
}

單用一個div 也可以實現這么好看實用的效果！

8.png