透明边框，虚线边框，蚂蚁线边框

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的蝴蝶一样，前段必备。