2-8 总结 CSS背景的一些小应用

1. 复古信封边框

示例代码：
html

<div>
  I have a nice stone art border,don't i look pretty?
</div>

css

width: 300px;
height: 170px;
padding: 1em;
border:1em solid transparent;

background:
  linear-gradient(white,white),
  repeating-linear-gradient(-45deg, #ff6936 0, #ff6936 12.5%, transparent 0, transparent 25%,#58a 0,#58a 37.5%,transparent 0,transparent 50%);
background-clip: padding-box,border-box;
background-size: 8em 8em;

复古信封

解释：background-clip:padding-box用于显示内容背景色白色，同时覆盖条纹背景
background-clip:border-box用于显示边框（条纹背景）

2.蚂蚁军动态框

先上图吧

无法显示动态效果 我很抱歉

跟小时候理发店门口的滚动条很相似。大家自己想象啊，心有多大，梦有多大！！
css

width: 300px;
height: 170px;
padding: 3px;
border: 3px solid transparent;

background:
linear-gradient(white,white),
repeating-linear-gradient(-45deg, black 0, black 25%,        tan 0,tan 50%);
background-clip: padding-box,border-box;
background-size: 1.2em 1.2em;

-moz-animation: ants 12s linear infinite;
animation: ants 12s linear infinite;

css动画

@keyframes ants { 100%{    background-position:100%  }}

3.还有一个我珍藏