如何使用CSS擦除边框？

Question

我正在尝试仅使用HTML/CSS创建矩阵效果,我发现的方法是应用实心边框,现在擦除顶部和底部的一些部分,有人知道如何才能使用CSS创建此效果(如果这是可能的) ？

有一张图片可以更好地解释我的目标:

Answer 1

一种语义方式是不给实际元素一个边界!您可以在左侧和右侧使用:before和:after伪元素作为透明框.伪元素被赋予透明背景和边框,其不与创建效果的内容重叠.

这适用于任何背景:http://jsfiddle.net/kkYrP/8/

.box{
    position:relative;
}
.box:before{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    width: 8%;
    border: 2px solid #333;
    border-right:none;
    z-index:1;
}
.box:after{
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    bottom:-2px;
    width: 8%;
    border: 2px solid #333;
    border-left:none;
    z-index:1;
}

注意:如果你有点击/悬停问题尝试加入pointer-events:none;的:before和:after.