连续图片边框
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
