连续的图像边框以及它的衍生运用

 2016-09-28 08:41

有时候我们想把一幅画做为一个应用边框,而不是背景

我一个漂亮的图片边框,不信你看!我相信大部分人都做过类似的东西。


我相信大部分人都做过类似的东西,一般我们会用两个元素来完成这个效果。

<div class="pic">
    <div>我一个漂亮的图片边框,不信你看!</div>
</div>
.pic{
    background: url(...);
    background-size: cover;
    padding: 1em;
}
.pic>div{
    background: white;
    padding: 1em;
}

有人提出,我们是不是可以直接用border-image直接来做这个呢?回答这个问题前我们先来了解下这个命令的工作原理吧。

border-image工作原理

border-image的基本原理是九宫格伸缩法:它把图片切割成九块,然后把他们应用到边框相应的边和角。如果未理解的,请详细阅读这篇文章

明白border-image工作原理后,我们就知道,如果单用这个方法是行不通的,那么我们可以换一个思路。

CSS渐变和背景的扩展

感谢背景与边框(第三版)引入了CSS渐变和背景的扩展,使得我们只有一个元素就能达到完全一致的效果。主要用到的思路就是在背景图片上,再叠加一层纯色背景。

为了让下层的图片背景透过边框区域显示出来,我们需要给两层背景指定不同的background-clip值。最后我们还要注意,我们只能在多重背景的最底层设置背景色,因此我们需要用一道白色→白色的渐变色来模拟纯白色背景。

这样就可以只用一层代码就写出上述的效果了,其中详解请参考《灵活的背景定位》:

padding:1em;
border:1em solid transparent;
background: linear-gradient(#fff,#fff),
            url(...);
background-size: cover;
background-clip: padding-box,border-box;

我一个漂亮的图片边框,不信你看!


但感觉有点怪怪的。原因是background-origin的默认值是padding-box,因此图片显示的尺寸不仅取决于padding box的尺寸,而且被放置在了padding box的原点上(左上角)。我们看到的实际上就是背景图片以“平铺”方式蔓延到border box区域的效果。

为了修正它,我们再加个background-origin的控制。调整后的效果很OK了:

我一个漂亮的图片边框,不信你看!


background-origin:border-box;

最后,我们把代码整合下,毕竟简短的代码给人看起来舒服点:

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(#fff,#fff) padding-box,
            url(...) border-box 0 / cover;

老式信封效果边框

当然,这个方法还可以拓展运用到其他地方,比如我们常常看到的老式信封边框就可以用这个来做:

这是一个不错的老式边框的格式,效果还可以吧!


padding: 1em;
border: 1em solid transparent;
background: linear-gradient(#fff,#fff) 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;

当然,方法往往不至一个,我们这里也可以用border-image来做:

padding: 1em;
border: 16px solid transparent;
border-image:16 repeating-linear-gradient(-45deg,rad 0,red 1em,
                transparent 0,transparent 2em,
                #58a 0,#58a 3em,
                transparent 0,transparent 4em);


蚂蚁行军边框

我们来做一个非常好玩的边框:蚂蚁行军边框。这个边框是一种虚线边框,看起来在不断转动,就好像蚂蚁一样。

蚂蚁行军效果,有点意思!


这里我们只要将上面信封边框稍加改变,最后再加上一个动画效果即可。这种效果常用于特殊式样,比如选中,框选等。

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

备注效果

当然,border-image也有它强大的地方,尤其是在搭配渐变图案时更是威力倍增。这里我们要做一个类似于备注的效果。它的效果和代码就变成如下:

这是一个备注的效果!

border-top: .15em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
padding-top: .2em;


作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: