利用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;
}

查看运行效果