如何使用CSS删除边框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (76)

我正在尝试使用HTML/CSS创建一个矩阵效应,我发现的方法是应用一个实心边框,现在删除上下两层的某个部分,有人知道我如何才能只使用CSS(如果可能的话)来创建这个效果?

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

提问于
用户回答回答于

语义的方式是不给实际的元素一个边界!可以使用: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

用户回答回答于

http://jsfiddle.net/kkYrP/5/

左、右分界:

.box {
    border-left:2px solid #333;
    border-right:2px solid #333;
}

并添加带有负z索引的伪元素:

.box:before{
    content:"";
    background:#333;
    position:absolute;
    z-index: -1;
    left:-2px;
    width: 20px;
    top:-2px;
    bottom:-2px;
}
.box:after{
    content:"";
    background:#333;
    position:absolute;
    z-index: -1;
    right:-2px;
    width: 20px;
    top:-2px;
    bottom:-2px;
}

扫码关注云+社区

领取腾讯云代金券