html - CSS：如何将边框分成两条线？

Question

这是我正在尝试做的事情-

我知道在 css 中创建一个盒子很容易，并且给边框的任何一侧都更容易。但是我怎样才能只使用 css 来获得这个形状。

但是我尝试了这个东西，我可以使用两个 div（一个白色背景）来做到这一点。

我试过了-

CSS

.box
{
    height:100px;
    width:200px;
    border:10px solid #111;

    z-index:1;

}
h1
{
    text-align:center;
    vertical-align:middle;
    position:relative;

}
.transparent-border
{
    position:absolute;
    z-index:2;
    height:20px;
    width:170px;

    left:30px;
    background:white;

}

HTML

<div class="transparent-border"></div>
<div class="box"><h1>ABC</h1>
</div>

JSFIDDLE

边界划分

Answer 1

:before 和 :after 伪元素有一个简单的解决方案。

这是一个例子：jsFiddle

.box:before {
    position:absolute;
    top:-10px; 
    left:10%;
    content:"";
    display:block;
    height:10px;
    width:80%;
    background:white;
}

.box:after {
    position:absolute;
    bottom:-10px; 
    left:10%;
    content:"";
    display:block;
    height:10px;
    width:80%;
    background:white;
}

您分配position:relative给 div.box。然后分配position:absolute to :before和:after元素。然后应用白色背景并使用顶部和底部将其放置在黑色边框上。伪元素的高度必须等于 box.div 的边框宽度。

Answer 2

html:只有一个div

<div class="border">
    <h1>ABC</h1>
</div>

CSS：白色background-color和负面margin

.border
{
    border:10px solid #111;
    width:200px;
}

h1
{
    background-color: white;  /* most important part */
    margin: -10px 10px;       /* most important part */

    text-align:center;

    padding: 20px;
}

jsFiddle

Answer 3

增加透明边框的高度并将文本推到顶部：

.box {
    height:100px;
    width:200px;
    border:10px solid #111;
    z-index:1;
}
h1 {
    text-align:center;
    vertical-align:middle;
    position:relative;
    z-index:3;     
}
.transparent-border {
    position:absolute;
    z-index:2;
    height:120px;
    width:170px;   
    left:30px;
    background:white;  
}

Answer 4

如果您的背景是纯色的，那么有一个简单的方法。

内部元素具有纯色 BG 并且被拉到外部元素的边界上，具有负的垂直边距。但是你也给内部元素一些水平边距，所以外部元素的边框最终看起来像括号：

<div class="outside">
    <div class="inside">ABC</div>
</div>


.outside {
    border:10px solid #111;
    display:inline-block;
}
.inside {
    background:#fff;
    padding:20px;
    margin:-10px 10px;
}

http://jsfiddle.net/Gasdj/11/

伪元素解决方案在多行文本上中断。

Answer 5

像这样做

<style type="text/css">
  .b:after{content:"]"}
  .b:before{content:"["}
</style>

<span class="b">text</span>