html中橫線使用

第一種：
<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   下顏色

.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);
}