如何使用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 。

Answer 2

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

给左边和右边边框：

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

并添加负z-index的伪元素：

.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的解决方案。

Answer 3

工作实例： http ： //jsfiddle.net/awesome/4gB43/1/

使用background-image和linear-gradient ：

• https://developer.mozilla.org/en-US/docs/Web/CSS/background-image#Browser_compatibility
• https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Browser_compatibility

CSS：

.wrapper {
    display: inline-block;
    padding: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90% 100%;
    background-color: black;
    background-image: linear-gradient(white, white);
}
.wrapper-inner {
    display: block;
    background: white;
    padding: 5px;
}
table td {
    border-top: none !important;
}
table {
    margin-bottom: 0 !important;
}

HTML：

<div class="wrapper">
    <div class="wrapper-inner">
        <table class="table">
            <thead class="sr-only">
                <tr>
                    <th>Whatever</th>
                    <th>Again, Whatever</th>
                    <th>Finally, Whatever</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>71571</td>
                    <td>26157</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>-497461.35798</td>
                    <td>-143674.72856</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>0</td>
                    <td>-6391.62859</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 4

延伸James Bruckner的回应，我最近不得不做类似的事情，但我不得不用花括号做。 基本上，您将大括号添加为:after和:before ，并将它们置于绝对位置。 您可以在下面的链接中看到实施。

http://jsfiddle.net/kaNG2/

你的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:"]";
}

Answer 5

我想给出一个最简单的替代方案，在伪元素上使用linear-gradient 。
这种方式不使用额外的标记，并且您不会有任何鼠标事件问题。

 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; } 

 <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> 

Answer 6

工作实例： http ： //jsfiddle.net/awesome/bA7d3/

CSS：

.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;
}

Answer 7

您可以在包含数字的元素旁边的元素中绘制大括号。 这将为您提供所需的效果。

CSS

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;
}

HTML

<span class="Brace">
<span class ="leftBrace"> </span>
<span class =""> TEXT</span>
<span class ="rightBrace"> </span>
</span>

这里的代码示例： JSFiddle