1、透明边框(IE9+)
最主要的一句，是hsla()这个函数，里面的.5，是透明度。
<div class="div1">
<span></span>
</div>
<style>
.div1{
width:220px;
padding:10px;
background: linear-gradient(45deg, #fb3 50%,#58a 50%);
}
.div1 span{
display: block;
width: 200px;
height:200px;
border:10px solid hsla(0,0%,100%,.5);
background:white;
background-clip:padding-box;
}
</style>
技巧： background-clip:padding-box; 以padding内边缘参见背景颜色，背景颜色不会影响到border
2、虚线边框
可以制作类似于老信封的边框。
<div id="div2">
<div class="div1"></div>
<div class="div2"></div>
</div>
<style>
#div2 div{
float: left;
margin-right: 10px;
width: 200px;
height:200px;
}
#div2 .div1{
border:10px dashed hsla(0,0%,0%,.5);
background: #333;
background-clip:padding-box;
}
#div2 .div2{
padding:1em;
border:16px solid transparent;
border-image:16 repeating-linear-gradient(-45deg,
red 0,red 1em,
transparent 0,transparent 2em, /* transparent 透明 */
#58a 0,#58a 3em,
transparent 0,transparent 4em);
}
#div2:after{
content: '';
display: table;
clear:both;
}
</style>
3、图片边框(IE9+)
<div id="div3"></div>
<style>
#div3{
width: 200px;
height:200px;
padding:1em;
border: 1em solid transparent;
background:linear-gradient(white, white),
url(../fd.png);
background-size:50px;
background-clip:padding-box,border-box;
background-origin:border-box;
}
</style>
可以吧图片缩到边框，并且可以制定比例。
3、多重边框(IE9+)
内外边框都可以，随便你怎么折腾
<div id="div4"></div>
<style>
#div4{
width: 200px;
height:200px;
margin-left: 100px;
border:10px solid hsla(0,0%,100%,.5);
background:#333;
background-clip:padding-box; /*背景只出现在padding内部，不会影响到border*/
box-shadow:
0 0 0 10px #655,
0 0 0 15px deeppink, /*inset 内边距*/
0 0 0 25px #6679ff,
0 0 0 35px #ffff67,
0 0 0 45px #02ff82,
0 0 0 55px #f5faff;
}
</style>
4.蚂蚁线
<div id="div5"></div>
<style>
@keyframes ants {to { background-position:100% } }
#div5{
width: 200px;
height:200px;
padding:1em;
border: 1px solid transparent;
background:
linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,
black 0,black 25%,white 0,white 50%
)0 /.6em .6em;
animation:ants 12s linear infinite;
}
</style>
备注：这里的大多数例子，都是从LEA VEROU的《css揭秘》这本书上借鉴来的，感兴趣的童鞋不如去买这本书，简直是CSS神书，就和Js的蝴蝶一样，前段必备。
