css - 如何在div的 Angular 落绘制纵横交错的边框

Question

我有办法让 div 中的每个边框以各种方式延伸 1 或 2 个像素，以便它们在每个 Angular 形成一个十字吗？

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