html如何修改hr水平直线的粗细

更新日期: 2019-08-03阅读: 9.6k标签: 原生

hr是常见的超文本标签,是一条水平直线,要设置该直线变粗一些。可以先把hr本身的border隐藏掉,然后设置border-top-width,也就是只留上边框,如图:hr的默认高度height是0,所以不会显示矩形边框,实际hr是有边框的,而且是上下左右四个边框值为1的,可以在浏览器里查看下默认hr的各种边距和边框,但height设置高之后,就可以看出hr本身的带的矩形边框。必须要把hr本身的border设置为none,因为hr默认是有个四边为1的边框的,去掉其他个边框,然后设置只对上边框进行设置。

hr一般用于水平直线,所以不需要给hr加这种矩形边框,可以只设置上边框,上边框是一个真正的一条线,然后设置上边框的宽度(粗细),就可以设置粗一些的水平直线。代码

border:none;border-top:30px solid #00ff00;

上面这个代码是简写形式,border-top后面跟的是三个参数分别写:分别写代码:

border:none;
border-top-width:30px;
border-top-style:solid;
border-top-color:#00ff00;

测试代码:

<div id="d1">
<p style="margin:0;"> (1)</p><!--默认height是0-->
<hr style="border-color:#0000ff;" >

<p style="margin:0;"> (2)</p><!--高度不为0,显示出边框-->
<hr style="height:5px;border-color:#0000ff;"/>

<p style="margin:0;"> (3)</p><!--不显示边框,设置上边框30px 实线 颜色-->
<hr style="border:none;border-top:30px solid #00ff00;" />

<p style="margin:0;"> (4)</p><!--同(3),分开写模式-->
<hr style="border:none;border-top-width:30px;border-top-style:solid;border-top-color:#00ff00;" />

-----------------------------------------------------------------------------------------------------
<p style="margin:0;"> (5)错误</p><!--没把border设置为none-->
<hr style="border-top:30px solid #00ff00;" />

<p style="margin:0;"> (6)错误</p><!--错误写法的1,设置border-style而不是border-top-style-->
<hr style="border:none;border-top-width:30px;border-style:solid;border-top-color:#00ff00;" />
</div>

如图:


默认hr的默认样式:上边距margin 8px,下边距margin 8px,左右无margin,上下左右border都为1px,高为0.给默认hr加了height:5px的样式:其余同上,高度变为5px(由于高度改变,四周的1px的边框都显现出来)
设置单上边线并加粗的样式:margin和高同默认,左右和下边无边框,上边框为 30px。


链接: https://fly63.com/article/detial/4488

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!