想用图像作为一个元素的边框，并且图片会随着元素尺寸的扩大而自动延伸并覆盖完整的边框区域。
首先想到的是用两个元素来实现：
.box{
background: url("5.jpg");
background-size: cover;
padding: 1em;
}
.box > div{
background: white;
padding: 1em;
}
<div class="box">
<div>
这是用两个元素来实现将图片作为边框的效果
</div>
</div>
使用两个元素完全可以实现
但如果用一个元素可以实现吗？可以！
主要思路是：在背景图片上叠加一层纯白的实色背景，为了让下层的图片背景透过边框区域显示出来，我们需要给两层背景设置不一样的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;
}
<div class="box2">
这是用一个元素来实现将图片作为边框的效果
</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>
这个虚线框是会动的！！
