连续的图像边框

想用图像作为一个元素的边框，并且图片会随着元素尺寸的扩大而自动延伸并覆盖完整的边框区域。
首先想到的是用两个元素来实现：

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

    

        

            这是用两个元素来实现将图片作为边框的效果
        
    

使用两个元素完全可以实现

但如果用一个元素可以实现吗？可以！
主要思路是：在背景图片上叠加一层纯白的实色背景，为了让下层的图片背景透过边框区域显示出来，我们需要给两层背景设置不一样的background-clip，而我们只能在多重背景的最底层设置背景色，因此需要从一道白色过渡到白色的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;
}

        这是用一个元素来实现将图片作为边框的效果
 

以上技巧还可以用在渐变图案上，如：制作一个老式信封的边框：

.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;
        }

        亲爱的，你想我了吗？
    

老式信封边框样式

蚂蚁行军！一个技巧变种：

 @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;
    }

    

        技巧变种之蚂蚁行军边框
    

这个虚线框是会动的！！