如何在不使用 <hr> 标签的情况下制作水平线?
How to make a horizontal line without using <hr> tag?
如何在不使用 <hr>
标签的情况下绘制细水平线?
我试过这个:
.horizontal-line{
border-top: 1px solid #9E9E9E;
border-bottom: 1px solid #9E9E9E;
}
虽然有效,但我希望这条线更细一些。我尝试将 1px 减小到 0.5px,但没有用。
根据 this css-tricks 讨论,您可以试一试:
.class-name:after {
content: " ";
display: block;
border-bottom: 0.5px solid #9E9E9E;
}
<div class="class-name"></div>
可以用,区别不大。
.line {
display: inline-block;
width: 100%;
border-top: 0.2px solid red;
}
hr {
border-top: 0.2px solid red;
}
<div>
content
</div>
<span class='line'></span>
<div>
content
</div>
<hr>
<div>
content
</div>
有很多方法可以做到这一点。我们不能在 CSS 中使边框的大小小于 1px,所以我尝试过这种方式。随意更改不透明度。
.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;
}
如何在不使用 <hr>
标签的情况下绘制细水平线?
我试过这个:
.horizontal-line{
border-top: 1px solid #9E9E9E;
border-bottom: 1px solid #9E9E9E;
}
虽然有效,但我希望这条线更细一些。我尝试将 1px 减小到 0.5px,但没有用。
根据 this css-tricks 讨论,您可以试一试:
.class-name:after {
content: " ";
display: block;
border-bottom: 0.5px solid #9E9E9E;
}
<div class="class-name"></div>
可以用,区别不大。
.line {
display: inline-block;
width: 100%;
border-top: 0.2px solid red;
}
hr {
border-top: 0.2px solid red;
}
<div>
content
</div>
<span class='line'></span>
<div>
content
</div>
<hr>
<div>
content
</div>
有很多方法可以做到这一点。我们不能在 CSS 中使边框的大小小于 1px,所以我尝试过这种方式。随意更改不透明度。
.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;
}