Как стирать элемент границы с помощью CSS?

Ответ 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.

Ответ 2

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

Этот адрес вызывает проблемы @David и основан на решении @James.

Ответ 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>

Ответ 4

Расширение ответа Джеймса Брукнера, мне недавно пришлось сделать что-то подобное, но мне пришлось делать это с фигурными фигурными скобками. В основном, вы добавляете фигурные скобки как содержимое в :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:"]";
}

Ответ 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>

Ответ 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;
}

Ответ 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