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的位置，就达到上面的图例的效果了。

来源：oschina

链接：https://my.oschina.net/u/4270506/blog/3227738