如何使用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;
}
最佳答案
您可以使用伪元素和透明/黑色边框: 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;
}
如果增加边框宽度,它看起来会更好:demo
关于html - 这种形式的div边框: blank gaps in the corners,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23980819/