blocks|key|128285|text|一种语义方法是根本不给实际元素一个边框！您可以使用:before和:after伪元素作为右侧和左侧的透明框。伪元素被赋予了透明的背景和边框，这些背景和边框不会与创建效果的内容重叠。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|128286|这适用于任何背景：http://jsfiddle.net/kkYrP/8/|128287|.box{
++++position:relative;
}
.box:before{
++++content:+"";
++++position:+absolute;
++++top:+-2px;
++++left:+-2px;
++++bottom:+-2px;
++++width:+8%25;
++++border:+2px+solid+#333;
++++border-right:none;
++++z-index:1;
}
.box:after{
++++content:+"";
++++position:+absolute;
++++top:+-2px;
++++right:+-2px;
++++bottom:-2px;
++++width:+8%25;
++++border:+2px+solid+#333;
++++border-left:none;
++++z-index:1;
}|code-block|syntax|javascript|128288|注意:如果您有点击/悬停问题，请尝试在:before和:after上添加pointer-events:none;。|128289|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kkYrP/8/^0|P|7|X|6|0|9|S|0|0|0|J|7|R|6|10|K|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>A semantic way is to not give the actual element a border at all! You use <code>:before</code> and <code>:after</code> pseudo elements as transparent boxes on the right and left side. The pseudo elements are given transparent backgrounds and borders that don't overlap the content which creates the effect.</p>

<p>This works with any background: <a href="http://jsfiddle.net/kkYrP/8/" rel="noreferrer">http://jsfiddle.net/kkYrP/8/</a></p>

<pre><code>.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;
}
</code></pre>

<p>Note: if you're having clicking/hovering issues try adding <code>pointer-events:none;</code> on the <code>:before</code> and <code>:after</code>.</p>


blocks|key|128299|text|工作示例：http://jsfiddle.net/awesome/bA7d3/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|128300|CSS：|128301|.table.table-custom+tr:first-child+td:first-child+{
++++border-top:+2px+solid+black;
}
.table.table-custom+tr:last-child+td:first-child+{
++++border-bottom:+2px+solid+black;
}
.table.table-custom+tr:first-child+td:last-child+{
++++border-top:+2px+solid+black;
}
.table.table-custom+tr:last-child+td:last-child+{
++++border-bottom:+2px+solid+black;
}
.table.table-custom+{
++++border-right:+2px+solid+black;
++++border-left:+2px+solid+black;
}
.table.table-custom+td+{
++++border-top:+none;
}|code-block|syntax|javascript|128302|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/awesome/bA7d3/^0|5|Y|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>working example: <a href="http://jsfiddle.net/awesome/bA7d3/" rel="nofollow">http://jsfiddle.net/awesome/bA7d3/</a></p>

<p>CSS:</p>

<pre><code>.table.table-custom tr:first-child td:first-child {
    border-top: 2px solid black;
}
.table.table-custom tr:last-child td:first-child {
    border-bottom: 2px solid black;
}
.table.table-custom tr:first-child td:last-child {
    border-top: 2px solid black;
}
.table.table-custom tr:last-child td:last-child {
    border-bottom: 2px solid black;
}
.table.table-custom {
    border-right: 2px solid black;
    border-left: 2px solid black;
}
.table.table-custom td {
    border-top: none;
}
</code></pre>


blocks|key|4634421|text|您可以在包含数字的元素旁边的元素中绘制大括号。这会给你想要的效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4634422|CSS|4634423|span.leftBrace
{
width:10px;
height:100px;
float:left;
border-width:5px;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:solid;
}
span.rightBrace
{
float:right;
width:10px;
height:100px;
border-width:5px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:none;
}
span.Brace
{
height:100px;
display:inline;
width:200px;
}|code-block|syntax|javascript|4634424|HTML|4634425|<span+class="Brace">
<span+class+="leftBrace">+</span>
<span+class+="">+TEXT</span>
<span+class+="rightBrace">+</span>
</span>|4634426|这里的工作代码示例：JSFiddle|offset|length|4634427|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4Jyzd/^0|0|0|0|0|0|A|8|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>You could draw the braces in elements next to the one containing the numbers. This will give you the effect you want.</p>

<h2>CSS</h2>

<pre><code>span.leftBrace
{
width:10px;
height:100px;
float:left;
border-width:5px;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:solid;
}
span.rightBrace
{
float:right;
width:10px;
height:100px;
border-width:5px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:none;
}
span.Brace
{
height:100px;
display:inline;
width:200px;
}
</code></pre>

<h2>HTML</h2>

<pre><code>&lt;span class="Brace"&gt;
&lt;span class ="leftBrace"&gt; &lt;/span&gt;
&lt;span class =""&gt; TEXT&lt;/span&gt;
&lt;span class ="rightBrace"&gt; &lt;/span&gt;
&lt;/span&gt;
</code></pre>

<p>Example of working code here: <a href="http://jsfiddle.net/4Jyzd/" rel="nofollow">JSFiddle</a></p>


blocks|key|4634461|text|http://jsfiddle.net/kkYrP/5/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4634462|给出一个边框-左和右：|4634463|.box+{
++++border-left:2px+solid+#333;
++++border-right:2px+solid+#333;
}|code-block|syntax|javascript|4634464|并添加具有负z索引的伪元素：|4634465|.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;
}|4634466|这解决了@David的问题，并基于@James的解决方案。|4634467|entityMap|0|LINK|mutability|MUTABLE|url^0|0|S|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|4]]]]

<p><a href="http://jsfiddle.net/kkYrP/5/" rel="nofollow">http://jsfiddle.net/kkYrP/5/</a></p>

<p>Give a border-left and right:</p>

<pre><code>.box {
    border-left:2px solid #333;
    border-right:2px solid #333;
}
</code></pre>

<p>And add pseudo elements with negative z-index:</p>

<pre><code>.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;
}
</code></pre>

<p>This adresses @David's problems and is based on @James's solution.</p>


blocks|key|128371|text|扩展James+Bruckner的回应，我最近不得不做一些类似的事情，但我必须用大括号。基本上，您将大括号作为内容添加到:after和:before中，并对它们进行绝对定位。你可以在下面的链接中看到实现。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|128372|http://jsfiddle.net/kaNG2/|128373|你的HTML|128374|<div+class="box">This+is+a+test.+This+is+a+test.+This+is+a+test.+This+is+a+test.+This+is+a+test.+</div>|code-block|syntax|javascript|128375|你的CSS|128376|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:"]";
}|128377|entityMap|0|LINK|mutability|MUTABLE|url^0|1O|6|1V|7|0|0|Q|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|19|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1A|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|G]]]]

<p>Extending James Bruckner's response, I recently had to do something similar, but I had to do it with curly braces. Basically, you add the braces as content in <code>:after</code> and <code>:before</code> and you position absolute them. You can see the implementation in the link below.</p>

<p><a href="http://jsfiddle.net/kaNG2/" rel="nofollow">http://jsfiddle.net/kaNG2/</a></p>

<p>Your HTML</p>

<pre><code>&lt;div class="box"&gt;This is a test. This is a test. This is a test. This is a test. This is a test. &lt;/div&gt;
</code></pre>

<p>Your CSS</p>

<pre><code>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:"]";
}
</code></pre>


blocks|key|128439|text|我想给出一个最简单的选择，在伪元素上使用linear-gradient。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|128440|这种方式不使用额外的标记，也不会出现任何鼠标事件问题。|128441|​|128442|📷|atomic|128443|128444|128445|table.matrix+{
++++position:+relative;
++++background:+white;
}
table.matrix:before+{
++++content:+'+';
++++position:+absolute;
++++top:+-2px;
++++left:+-2px;
++++right:+-2px;
++++bottom:+-2px;
++++z-index:+-1;
++++background-image:+linear-gradient(to+right,+black+10%25,+white+10%25,+white+90%25,+black+90%25);
}

/*+Non-required+stuff+*/
td+{
++++padding:+3px+5px;
}|code-block|syntax|javascript|128446|<table+class="matrix">
++++<thead>
++++++++<tr>
++++++++++++<th>#</th>
++++++++++++<th>First+Name</th>
++++++++++++<th>Last+Name</th>
++++++++++++<th>Username</th>
++++++++</tr>
++++</thead>
++++<tbody>
++++++++<tr>
++++++++++++<td+rowspan="2">1</td>
++++++++++++<td>Mark</td>
++++++++++++<td>Otto</td>
++++++++++++<td>@mdo</td>
++++++++</tr>
++++++++<tr>
++++++++++++<td>Mark</td>
++++++++++++<td>Otto</td>
++++++++++++<td>@TwBootstrap</td>
++++++++</tr>
++++++++<tr>
++++++++++++<td>2</td>
++++++++++++<td>Jacob</td>
++++++++++++<td>Thornton</td>
++++++++++++<td>@fat</td>
++++++++</tr>
++++++++<tr>
++++++++++++<td>3</td>
++++++++++++<td+colspan="2">Larry+the+Bird</td>
++++++++++++<td>@twitter</td>
++++++++</tr>
++++</tbody>
</table>|128447|128448|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/e576e56741a8f9f4dfc8e386c9613e9f.jpeg|imageAlt^0|K|F|0|0|0|0|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|M|3|I|5|6|7|1E|8|@]|D|@]|E|$]]|$1|N|3|I|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1G|8|@]|D|@]|E|$R|S]]|$1|T|3|U|5|Q|7|1H|8|@]|D|@]|E|$R|S]]|$1|V|3|I|5|6|7|1I|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13|14|-4]]]]

<p>I would like to give a simplest alternative, using a <code>linear-gradient</code> on a pseudo-element.<br>
This way doesn't use extra markup, and you won't have any mouse-event issue.</p>

<p><img src="https://i.stack.imgur.com/WX3gh.jpg" alt="enter image description here"></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>table.matrix {
    position: relative;
    background: white;
}
table.matrix:before {
    content: ' ';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    background-image: linear-gradient(to right, black 10%, white 10%, white 90%, black 90%);
}

/* Non-required stuff */
td {
    padding: 3px 5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="matrix"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;#&lt;/th&gt;
            &lt;th&gt;First Name&lt;/th&gt;
            &lt;th&gt;Last Name&lt;/th&gt;
            &lt;th&gt;Username&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td rowspan="2"&gt;1&lt;/td&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;@mdo&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Mark&lt;/td&gt;
            &lt;td&gt;Otto&lt;/td&gt;
            &lt;td&gt;@TwBootstrap&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Jacob&lt;/td&gt;
            &lt;td&gt;Thornton&lt;/td&gt;
            &lt;td&gt;@fat&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;3&lt;/td&gt;
            &lt;td colspan="2"&gt;Larry the Bird&lt;/td&gt;
            &lt;td&gt;@twitter&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>I'm trying to create a matrix effect using only HTML/CSS, and the way how i found is to apply a solid border and now erase some piece at top and bottom, someone knows how can I create this effect only using CSS (If it's possible) ? </p>

<p>There is a pic to explain better my objective:</p>

<p><img src="https://i.stack.imgur.com/LwLMb.png" alt="enter image description here"></p>


How can I erase a border piece using CSS?

我试图创建一个只使用HTML/CSS的矩阵效果，我找到的方法是应用实线边框，现在删除顶部和底部的一些部分，有人知道我如何才能只使用CSS创建此效果(如果可能)？有一张图片可以更好地解释我的目标：​​

问如何使用CSS擦除边框？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS擦除边框？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS擦除边框？
EN