想用圖像作為一個元素的邊框，并且圖片會隨著元素尺寸的擴大而自動延伸并覆蓋完整的邊框區(qū)域。
首先想到的是用兩個元素來實現(xiàn)：

.box{
            background: url("5.jpg");
            background-size: cover;
            padding: 1em;
        }
        .box > div{
            background: white;
            padding: 1em;
        }

    <div class="box">
        <div>
            這是用兩個元素來實現(xiàn)將圖片作為邊框的效果
        </div>
    </div>

使用兩個元素完全可以實現(xiàn)

但如果用一個元素可以實現(xiàn)嗎？可以！
主要思路是：在背景圖片上疊加一層純白的實色背景，為了讓下層的圖片背景透過邊框區(qū)域顯示出來，我們需要給兩層背景設(shè)置不一樣的background-clip，而我們只能在多重背景的最底層設(shè)置背景色，因此需要從一道白色過渡到白色的CSS漸變來模擬出純白色背景的效果。

.box2{
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white,white),url("5.jpg");
            background-size: cover;
            background-clip: padding-box,border-box;
            background-origin: border-box;
}

<div class="box2">
        這是用一個元素來實現(xiàn)將圖片作為邊框的效果
 </div>

以上技巧還可以用在漸變圖案上，如：制作一個老式信封的邊框：

.box3{
            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 class="box3">
        親愛的，你想我了嗎？
    </div>

老式信封邊框樣式

螞蟻行軍！一個技巧變種：

 @keyframes ants{to{background-position: 100%}}
 .box4{
        padding: 1em;
        border: 1px solid transparent;
        background: linear-gradient(white,white) padding-box,
        repeating-linear-gradient(-45deg,black 0,black 25%,white 0,white 50%) 0 /.6em .6em;
        animation: ants 12s linear infinite;
    }

    <div class="box4">
        技巧變種之螞蟻行軍邊框
    </div>

這個虛線框是會動的??！