阅读CSS Secrets（七）

连续图片边框

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