在對html網頁進行美化的時候,肯定少不了要用的hr標簽進行裝飾,很多人都會直接使用hr標簽,但也有大部份新人只會使用hr標簽,并不會對hr標簽進行一些美化的操作,hr標簽進過CSS樣式進行美化后,也是非常好看以及百常的實用的,今天飛鳥慕魚的小編就給大家說一說,有于對HTML中hr標簽的美化以及一些實例。

HTML中的hr標簽

国产视频appHTML中的<hr> 標簽在 HTML 頁面中創建一條水平線。

水平分隔線(horizontal rule)可以在視覺上將文檔分隔成各個部分。

国产视频app關于幾<hr/>CSS樣試的實例

HTML設置<hr>標簽的粗細以及顏色

代碼

<hr  style="border:5px solid red;" />
<br/>
 <hr />

代碼運行結果

QQ截圖20180731090316.png

通過上面的代碼我們可以看了,通過設置hr標簽css屬性border的值,就可以修改<hr>標簽的粗細以及顏色。

国产视频appHTML中<hr>元素幾種樣式舉例

下面有幾個實例,hr標簽透明漸變樣式,hr標簽顏色漸變樣式,hr標簽內嵌線樣式

由于使于觀察和截圖,對hr標簽的CSS屬性做了加高處理,實際適用時,可以修改一下

HTML代碼

<hr class="style-one"/>
<br/>
<hr class="style-two"/>
<br/>
<hr class="style-three"/>

CSS代碼

hr.style-one {/*內嵌水平線*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 4px;
    border-top: 4px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
hr.style-two {/*透明漸變水平線*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 4px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-three{/*漸變*/
    width:80%;
    margin:0 auto;
    border: 0;
    height: 4px;
    background: #333;
    background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}

代碼運行結果

QQ截圖20180731091434.png

圖片可放大查看

以面只是舉了幾個簡單的例子,hr標簽的樣式還可以通過CSS來實現很多,后面有時間了,會專門出一篇文章,來收集一些好看的樣式!