如何在div的角落画出十字交叉的边框

Question

我有办法让div中的每个边框在每个方向上延伸1或2个像素，以便它们在每个角落形成一个十字架吗？

Answer 1

您无法通过默认的css border属性执行此操作。但是，您可以通过尝试div的:before和:after选择器来实现您的目标：

<div class="cross-borders"></div>

.cross-borders {
    width:200px;
    height:200px;
    border:1px solid #000;
    border-top:0;
    border-bottom:0;
    position:relative;
    margin:20px auto;
}
.cross-borders:before,
.cross-borders:after {
    content: ' ';
    width:210px;
    height:1px;
    background-color:#000;
    position:absolute;
    top:5px;
    left:-5px;
}
.cross-borders:after {
    top: auto;
    bottom: 5px;
}

JSFiddle