我需要设置与图片中显示的类似的<HR>
样式:它就像两条线一条在另一条线上。我已经看到了这个,然后我想它可以做到,但我不记得在哪里。
到目前为止我得到了这个css代码,但我只得到了蓝线:
hr {
margin: 0px auto 10px;
background: #009edf;
width: 200px;
text-align: center; }
答案 0 :(得分:5)
您可以这样做:
hr {
height:2px;
border:0;
background-color: #444;
line-height:20px;
cursor: pointer;
}
hr:before {
content: '';
display: block;
height: 1px;
background-color: #111;
}
hr:after {
content: 'O';
color:#ccc;
display:block;
text-align:center;
background-color:#222;
width:60px;
margin-top:-10px;
position:absolute;
left:50%;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-ms-transform: translate(-50%);
-o-transform: translate(-50%);
transform: translate(-50%);
}
<hr>
答案 1 :(得分:2)
使用:before
:伪元素。
hr {
position: relative;
border: 0;
border-top: 2px solid #B2B2B2;
}
hr:before {
content: '';
position: absolute;
width: 60%;
height: 0;
border-top: 6px solid #0093E6;
color: blue;
left: 20%;
top: -4px;
}
&#13;
<hr />
&#13;
答案 2 :(得分:0)
这应该可以解决问题,
hr{
border: none;
border-bottom: 1px solid rgba(0,0,0,0.1);
border-top: 1px solid rgba(0,0,0,0.1);
height: 2px;
background: transparent;
}