css-方形邊框四角

項目中遇到下圖這種樣式，剛開始想切圖解決 后來想到更好的解決辦法，代碼如下：

HTML:

<div class="BoxWrap">
     <div class="horn">
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
     </div>
  </div>

css:

.BoxWrap{
      	width: 100px;
      	height: 100px;
      	position: relative;
      }
      .horn{
      	position: absolute;
      	width: 100%;
      	height: 100%;
      	border:1px solid #00d3e7;
      }
      .horn>div{
        width: 10px;
        height: 10px;
        position:absolute;
      }
      .horn .lt{
      	border-top: 3px solid #00d3e7;
      	border-left: 3px solid #00d3e7;
      	left: -2px;
      	top: -2px;
      }
      .horn .rt{
      	border-top: 3px solid #00d3e7;
      	border-right: 3px solid #00d3e7;
      	right: -2px;
      	top: -2px;
      }
      .horn .rb{
      	border-bottom:3px solid #00d3e7;
      	border-right: 3px solid #00d3e7;
      	right: -2px;
      	bottom: -2px;
      }
      .horn .lb{
      	border-bottom:3px solid #00d3e7;
      	border-left: 3px solid #00d3e7;
        left: -2px;
        bottom: -2px;
      }

　最外層容器使用相對定位，子元素使用絕對定位，再調整四個角的小div的位置，就達到上面的圖例的效果了。