利用CSS3实现透明边框和多重边框

使用background-clip属性实现透明边框

 .bordertest {
       border: 30px solid hsla(0,0%,90%,.5);
       background: #bbb;
       background-clip: padding-box;
       width:500px;
       height:300px;
 }

查看运行效果

使用box-shadow模拟多重边框

 .bordertest1 {
       background: lightblue;
       box-shadow: 0 0 0 10px #000,
                   0 0 0 20px #888,
                   0 0 0 30px #aaa;
       width:300px;
       height:200px;
       position: absolute;
       top:100px;
       left:100px;
       padding: 10px;
 }

使用outline属性生成多重边框

 .bordertest2{
      background: lightblue;
      border: 10px solid #000;
      outline: 10px dashed #888;
      width:300px;
      height:200px;
      position: absolute;
      top:100px;
      left:500px;
      padding: 10px;
 }

outline属性结合outline-offset属性的多重边框实现缝边效果

.bordertest3{
     background: lightblue;
     border: 15px solid lightblue;
     border-radius: 5px;
     outline: 3px dashed #fff;
     outline-offset: -10px;
     width:300px;
     height:200px;
     position: absolute;
     top:100px;
     left:900px;
     padding: 10px;
}

查看运行效果