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

查看運行效果