【CSS3特效开发】Repeating-linear-gradient在边框中的独特运用

渐变图案之老式信封边框：

这个特效是在开发连续图片边框之后变形改进得到的，至于连续图片边框效果回头再跟大家一起分享。

先看一下效果图：

设计知识点：css3中的repeating-linear-gradient属性background-clip属性。

需要注意的地方：我们只能在多重背景最底层设置背景色，不过可以通过color到color的css渐变来模拟实色背景在非底层设置背景颜色

CSS的background简写方式：

background: [background-color] [background-image] [background-repeat]
          [background-attachment] [background-position] / [ background-size]
            [background-origin] [background-clip];

示例代码：

<span style="font-size:14px;">div {padding: 1em;border: 16px solid transparent;border-image: 16 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em,              #58a 0, #58a 3em, transparent 0, transparent 4em);max-width: 20em;font: 100%/1.6 Baskerville, Palatino, serif;}</span><div>Bacon ipsum dolor amet eu adipisicing elit tongue ground round ex fatback proident kielbasa ham hock. Sausage beef beef ribs aliquip t-bone 

<span style="white-space:pre"></span>mollit. Quis beef tri-tip sunt, cupim ut magna salami t-bone. Ut laboris bresaola ribeye biltong landjaeger. Chuck pork belly sed sausage.</div>

可以通过background-size很容易的来修改条纹的宽度  通过border来修改整个边框厚度， 这个方法可以通过border-image实现，但是这个方法在这个实例中并不推荐   。原因如下：

参数繁多不统一，维护更为复杂，（border-image-slice不能以em为单位，只好用px）兼容性没有background好。

可以在can i use这个网站查看他们的兼容性。我的个人简历就是使用这个信封样式设计的   ，感觉挺有简历信件风格。

简历github地址：this Tom  个人简历      希望大家给我留言给些意见还有改进。

渐变图案之老式信封变形   蚂蚁行军边框！：

这个虚线边框效果看起来就像是蚂蚁排队一直转一样，间的最多的就是各种绘图软件中的选区框  。

先看一下效果图：

思路：在信封边框基础上，把条纹颜色转为黑白两色，并把边框宽度减少到1px ，然后再把background-size改到一个适合的大小，最后把background-position以动画的方式改变到100%就可以这样让它滚动起来了(虽然是忘两个方向滚的哈哈)：

实例代码：

@keyframes ants { to { background-position: 100% 100% } }div {padding: 1em;border: 1px solid transparent;background: linear-gradient(white, white) padding-box,            repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;animation: ants 12s linear infinite;max-width: 20em;font: 100%/1.6 Baskerville, Palatino, serif;}<div>Bacon ipsum dolor amet eu adipisicing elit tongue ground round ex fatback proident kielbasa ham hock. Sausage beef beef ribs 

aliquip t-bone mollit. Quis beef tri-tip sunt, cupim ut magna salami t-bone. Ut laboris bresaola ribeye biltong landjaeger. 

Chuck pork belly sed sausage.</div>

这个效果要是想用border-image来实现，唯一的办法是为border-image指定一个gif动画。不过在浏览器支持渐变插值的时候，就可以用渐变来实现他了。但是太繁琐。

我们看到border-image在上面两个实例中都没有很好地表现，单他也有强大的地方：

尤其是在搭配渐变图案的时候更是威力倍增，举个例子，假设我们需要一个顶部边框被裁切的效果，就像一般脚注那样，我们需要的就是border-image属性再加上一条由渐变生成的垂直条纹，并把要裁切的长度在渐变中写好，线的粗细可以由border-width来控制

效果图：

示例代码：

<span style="font-size:14px;">.footnote {border-top: .15em solid transparent;border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);padding-top: .5em;font: 220%/1.4 Baskerville, Palatino, serif;}<div class="footnote"><sup>1</sup> This is a footnote.</div></span>

希望这些css3新增属性的运用对大家有一定启示，平时运用真的太少，也是因为浏览器兼容问题吧，但是现在不准备好，马上IE8就被我们抛弃之后如何使用这个css3 h5新时代。    以上内容仅仅是我学习到的知识   与大家分享。