html - 花式边框分隔线

Question

我正在尝试创建以下内容（注意两端的 1 像素间隙）：

Answer 1

如果你试试：

<hr class="fancy">

使用以下 CSS：

hr.fancy {
    border: 1px solid black;
    border-width: 1px 0px;
    color: black;
    height: 5px;
    position: relative;
}
hr.fancy:after {
    content: '\A';
    position: absolute;
    bottom: -1px;
    right: 0px;
    display: block;
    width: 1px;
    height: 7px;
    border-left: 1px solid white;
}
hr.fancy:before {
    content: '\A';
    position: absolute;
    bottom: -1px;
    left: 0px;
    display: block;
    width: 1px;
    height: 7px;
    border-right: 1px solid white;
}

看看：http: //jsfiddle.net/audetwebdesign/P7umD/

您可以使用像素宽度来获得更大胆的外观。

浏览器兼容性
我在 Firefox 和 Chrome 中检查了这一点，并且标记呈现一致。

但是，在 IE9 中不起作用，您只会得到双线而不是书尾。

Answer 2

也许border-image会成功

http://www.w3schools.com/cssref/css3_pr_border-image.asp

http://css-tricks.com/understanding-border-image/

或者您可以使用div基于解决方案

<div class="border">
    Content

    <div class="left"></div>
    <div class="right"></div>
</div>



.border {
    border-width:0px;
    border-style: double;
    border-color: grey;
    border-bottom-width: 3px;
    position: relative;
}
.left,
.right{
    position: absolute;
    width: 1px;
    height: 3px;
    bottom: -3px;
    background-color: white;
}
.left {
    left: 1px;
}
.right {
    right: 1px;
}

http://jsfiddle.net/zCEKp/

Answer 3

这是你想要的吗？

HTML：

<div class="box">
        <div class="top-left"></div>
        <div class="top-right"></div>
        <div class="bottom-left"></div>
        <div class="bottom-right"></div>
</div>

CSS：

.box{
    position:relative;
    border:3px double;
    width:100px;
    height:50px;
}
.top-left, .top-right, .bottom-left, .bottom-right {
    position:absolute;
    width:4px;
    height:4px;
    border-left:1px #fff solid;
    border-right:1px #fff solid;
}
.top-left, .top-right{
    top:-4px;
}
.top-left, .bottom-left{
    left:-4px;
}
.top-right, .bottom-right{
    right:-4px;
}
.bottom-left, .bottom-right {
    bottom:-4px;
}

这是 jsFiddle 示例。

Answer 4

这个纯 CSS 解决方案可能对您有用：

html标记：

<div class="fancydivider">
    <div class="left">&nbsp;</div>
    <div class="middle">&nbsp;</div>
    <div class="right">&nbsp;</div>
</div>

CSS：

.fancydivider {
    clear: both;
}
    .fancydivider .left {
        border-bottom: double black;
        width: 1px;
        float: left;
    }
    .fancydivider .middle {
        border-bottom: double black;
        width: 50px;
        float: left;
        margin: 0 1px 0 1px;
    }
    .fancydivider .right {
        border-bottom: double black;
        width: 1px;
        float: left;
    }

结果：

http://jsfiddle.net/KNqR8/

http://jsfiddle.net/Lucidus/ZjGpS/1/ [编辑：第一个链接中的 css 错误-我不知道发生了什么；-)]