首頁 > web前端 > 前端問答 > html5中hr標籤能用css嗎

html5中hr標籤能用css嗎

WBOY
發布: 2022-01-23 15:34:58
原創
2863 人瀏覽過

在html5中,hr標籤能用css設定樣式,css樣式可以定義如何顯示HTML元素,只需要利用style屬性即可用css樣式來設定hr元素,語法為「


”或“hr{css樣式代碼;}”。

html5中hr標籤能用css嗎

本教學操作環境:windows10系統、HTML5版、Dell G3電腦。

html5中hr標籤能用css嗎

簡單來說,hr就是html頁面上的一條水平分隔線(horizo​​ntal rule),它可以在視覺上將文件分隔成各個部分。需要透過


標籤在 HTML 頁面中建立。

那麼我們看看預設的hr標籤樣式:

html5中hr標籤能用css嗎

就是一條黑線,一點都不美觀,更別說用


來美觀頁面了,這就需要用css來設定hr的樣式了。

css設定hr樣式

我們怎麼用css設定hr樣式?其實很簡單,可以透過css border屬性和css background-image屬性來設定hr的樣式:

1.css設定hr的粗細(加粗)與顏色

<hr style="border: 5px solid red;"/><!--修改的样式-->
<br />
<hr /><!--默认的样式-->
登入後複製

html5中hr標籤能用css嗎

2.css設定hr的虛線樣式(顏色為藍色)

<hr   style="max-width:90%"/>
登入後複製

html5中hr標籤能用css嗎

#3.css設定hr的雙線樣式

<hr   style="max-width:90%"/>
登入後複製

html5中hr標籤能用css嗎

4. css設定hr的3D立體樣式

<hr   style="max-width:90%"/>

登入後複製

html5中hr標籤能用css嗎

#5.css設定hr的漸層樣式

# html程式碼:

<hr class="style-one"/>
<br/>
<hr class="style-two"/>
登入後複製

css程式碼:

hr.style-one {/*透明渐变水平线*/
 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-two{/*渐变*/
 width:80%;
 margin:0 auto;
 border: 0;
 height: 4px;
 background: #333;
 background-image: linear-gradient(to right, red, #333, rgb(9, 206, 91));
}
登入後複製

html5中hr標籤能用css嗎

#以上只是舉了幾個簡單的例子,hr標籤的樣式還可以透過CSS來實現很多。大家可以動手試試!

推薦教學:《html影片教學

以上是html5中hr標籤能用css嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板