html中横线使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<pre class="inline:true class:language-html decode:1 " >第一种： <hr style=" height:2px;border:none;border-top:2px dotted #185598;" /> 园点虚线 height:2px;是hr的高度 border:none;是没有边框 border-top:2px dotted #185598;是设置横线的样式 dotted 虚线 #185598 颜色 第二种： <hr style="height:1px;border:none;border-top:1px dashed #0066CC;" /> 块虚线 第三种： <hr style="height:1px;border:none;border-top:1px solid #555555;" /> 实线，一条直线 第四种： <hr style="height:3px;border:none;border-top:3px double red;" /> 两条紧密实线， 第五种： <hr style="height:5px;border:none;border-top:5px ridge green;" /> 两种颜色 第六种： <hr style="height:10px;border:none;border-top:10px groove skyblue;" /> 两种颜色 border-top:10px groove skyblue; groove 上颜色 skyblue 下颜色 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<pre class="inline:true class:language-css decode:1 " > .style-one {/*内嵌水平线*/ width:80%; margin:0 auto; border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .style-two {/*透明渐变水平线*/ width:80%; margin:0 auto; border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } .style-three{/*渐变*/ width:80%; margin:0 auto; border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); } |