Bootstrap分割线和普通分割线

最新推荐文章于 2025-03-26 08:48:38 发布

程序员不弃

最新推荐文章于 2025-03-26 08:48:38 发布

阅读量4.3w

点赞数

分类专栏：【前端小酌】文章标签： divider 分割线 bootstrap

【前端小酌】专栏收录该内容

12 篇文章

订阅专栏

本文介绍了使用HTML与CSS实现多种样式的水平分割线及垂直分割线的方法，包括不同类型的水平线样式如渐变透明、虚线等，并展示了如何通过简单的表格边框属性实现垂直分割线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载：https://blog.youkuaiyun.com/qhwc2009/article/details/45047365

<div class="divider"></div>

<hr class="simple" color="#6f5499" />

 <!--两头渐变透明--> <hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color="#6f5499" size="3" /> <!--纺锥型--> <hr style="filter: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color="#6f5499" size="10"/> <!--3、右边渐变透明：--> <hr style="filter: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color='#987cb9' size=3> <!--4、左边渐变透明：--> <hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color="#987cb9" size=3> <!--5、虚线：--> <hr style="border:1 dashed #987cb9" width="80%" color="#987cb9" size=1> <!--6、双线：--> <hr style="filter: progid:dximagetransform.microsoft.shadow(color:#987cb9,direction:145,strength:15)" width="80%" color="#987cb9" size=1> <!--7、立体效果：--> <hr style="filter: progid:dximagetransform.microsoft.glow(color="#987cb9",strength=10)" width="80%" color="#987cb9" size=1> <!--8、钢针效果：--> <hr style="filter: progid:dximagetransform.microsoft.glow(color="#987cb9",strength=10)" width="80%" color="#987cb9" size=1> <!--９．垂直分割线--> <table border="1px" cellpadding="0" cellspacing="0" style="height:265px;border-left-style:solid; border-bottom-style:none;border-right-style:none;border-top-style:none">


https://blog.youkuaiyun.com/qhwc2009/article/details/45047365
<div class="divider"></div>
<hr class="simple" color="#6f5499" /> 

<!--两头渐变透明-->
<hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color="#6f5499" size="3" />


<!--纺锥型-->
<hr style="filter: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color="#6f5499" size="10"/>


<!--3、右边渐变透明：-->
<hr style="filter: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color='#987cb9' size=3>


<!--4、左边渐变透明：-->
<hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color="#987cb9" size=3>


<!--5、虚线：-->
<hr style="border:1 dashed #987cb9" width="80%" color="#987cb9" size=1>


<!--6、双线：-->
<hr style="filter: progid:dximagetransform.microsoft.shadow(color:#987cb9,direction:145,strength:15)" width="80%" color="#987cb9" size=1>


<!--7、立体效果：-->
<hr style="filter: progid:dximagetransform.microsoft.glow(color="#987cb9",strength=10)" width="80%" color="#987cb9" size=1>


<!--8、钢针效果：-->
<hr style="filter: progid:dximagetransform.microsoft.glow(color="#987cb9",strength=10)" width="80%" color="#987cb9" size=1>


<!--９．垂直分割线-->
<table border="1px" cellpadding="0" cellspacing="0" style="height:265px;border-left-style:solid; border-bottom-style:none;border-right-style:none;border-top-style:none">