如何使用CSS擦除边框？
如何使用CSS擦除边框？
提问于 2014-04-15 08:19:45
我试图创建一个只使用HTML/CSS的矩阵效果，我找到的方法是应用实线边框，现在删除顶部和底部的一些部分，有人知道我如何才能只使用CSS创建此效果(如果可能)？
有一张图片可以更好地解释我的目标：
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-04-15 08:28:56
一种语义方法是根本不给实际元素一个边框！您可以使用: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;
}注意:如果您有点击/悬停问题，请尝试在:before和:after上添加pointer-events:none;。
Stack Overflow用户
发布于 2014-04-15 08:42:52
给出一个边框-左和右：
.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;
}这解决了@David的问题，并基于@James的解决方案。
Stack Overflow用户
发布于 2014-04-15 16:10:35
扩展James Bruckner的回应，我最近不得不做一些类似的事情，但我必须用大括号。基本上，您将大括号作为内容添加到:after和:before中，并对它们进行绝对定位。你可以在下面的链接中看到实现。
你的HTML
<div class="box">This is a test. This is a test. This is a test. This is a test. This is a test. </div>你的CSS
div {
padding:3em;
font-size:1em;
width:20em;
position:relative;
}
div:after,
div:before {
font-size:6.7em;
color:#999;
position:absolute;
top:0;
}
div:before {
content: "[";
left:0;
}
div:after {
right:0;
content:"]";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23072566
复制相关文章
相似问题
腾讯云开发者
