」或「hr{css樣式代碼;}」。"> html5中hr標籤能用css嗎-前端問答-PHP中文網

html5中hr標籤能用css嗎

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

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


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

html5中hr標籤能用css嗎

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

html5中hr標籤能用css嗎

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


標籤在 HTML 頁面中建立。

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

html5中hr標籤能用css嗎

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


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

css設定hr樣式

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

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




登入後複製

html5中hr標籤能用css嗎

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


登入後複製

html5中hr標籤能用css嗎

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


登入後複製

html5中hr標籤能用css嗎

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



登入後複製

html5中hr標籤能用css嗎

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

# html程式碼:




登入後複製

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
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!