当前位置:首页 > 网络技术 > 收集一些hr标签样式

收集一些hr标签样式

逆流1年前 (2022-04-29)网络技术819

一些html中简单的hr分割线样式,方便以后自用!修改相关的颜色、距离、粗细代码,可以实现不同的显示效果。


一.点状虚线

<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />




二、细分离双线

<hr style="height:3px;border:none;border-top:3px double red;" />




三、粗连接双线

<hr style="height:10px;border:none;border-top:10px groove skyblue;" />




四、渐变线

<hr style="border: 0;height: 2px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));" />




五、带阴影的分割线

<hr style=" border: 0; padding-top: 10px;color: #d0d0d5;border-top: 1px solid rgba(0,0,0,.1);box-shadow: inset 0 10px 10px -10px" />





六、双虚线

<hr style="height:2px;border:2px dotted #0066CC;" />




标签: htmlhr标签