此形式的Div边框:角落中的空白间隙

Question

如何使用css完成此div边框:

我尝试使用虚线边框,但导致这个:http:
//jsfiddle.net/23qGr/

div {width: 20px; 
height: 20px; border: 6px #6a817d dashed; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px;
}

Answer 1

您可以使用伪元素和透明/黑色边框:DEMO

div {
    width: 20px;
    height: 20px;
    padding:6px;
    position:relative;
}
div:before , div:after {
    content:'';
    border:6px solid transparent;
    position:absolute;
}
div:before {
    left:2px;
    right:2px;
    top:0;
    bottom:0;
    border-top-color:black;
    border-bottom-color:black;
}
div:after {
    top:2px;
    bottom:2px;
    left:0;
    right:0;
    border-right-color:black;
    border-left-color:black;
}

如果你增加边框宽度,它看起来更好:演示