我正在尝试创建以下内容(注意两端的1像素间隙):
答案 0 :(得分:3)
如果您尝试:
<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中不起作用,你只能得到双行而不是书本。
答案 1 :(得分: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;
}
答案 2 :(得分:0)
这是你想要的吗?
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;
}
答案 3 :(得分:0)
此css-only解决方案可能适合您:
html标记:
<div class="fancydivider">
<div class="left"> </div>
<div class="middle"> </div>
<div class="right"> </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/Lucidus/ZjGpS/1/ [编辑:第一个链接中的错误css - 我不知道发生了什么; - )]