hr怎麼設定虛線樣式？多種hr樣式分享！
- 藏色散人原創
- 2018-11-03 09:31:5122137瀏覽
本篇文章主要跟大家介紹HTML中hr標籤設定虛線的方法以及幾種好看的hr樣式分享。
想必大家對於hr標籤已經非常熟悉了，在我們網頁設計中，常常會需要使用hr標籤達到分隔線的效果。
標籤官方給的定義就是在 HTML 頁面中建立一條水平線。
那麼從美觀上來說，好看的水平線肯定能讓你的網頁內容展現得層次分明，內容清晰可見，並且也會提升用戶體檢。
推薦參考影片教學：《HTML教學》
#下面我們就跟大家介紹hr設定虛線樣式的方法以及其他幾款好看的hr樣式分享。
hr使用程式碼範例如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>hr标签使用示例</title>
<head>
<style>
</style>
</head>
<body>
<div>
<hr style=" height:5px;border:none;border-top:2px dotted #ff3844;" /><br>
<hr style="height:10px;border:none;border-top:10px groove #1094f2;" /><br>
<hr style="height:11px;border:none;border-top:5px ridge #4cedef;" /><br>
<hr style="height:8px;border:none;border-top:3px double #9492ff;" />
</div>
</body>
</html>「前台效果如下：
那麼以上就是四款好看的hr樣式分享，其中第一條就是虛線設定。
大家只要熟練的掌握hr標籤的使用，就可以在你的網頁靈活運用。
註：水平分隔線（horizontal rule）可以在視覺上將文件分隔成各個部分，並且在 HTML 中，
標籤沒有結束標籤。
height:5px;是指hr的高度
border:none;無邊框的設定。
border-top:2px dotted #ff3844;設定水平線的樣式
dotted表示虛線
#185598 表示顏色
那麼本篇就是關於HTML中hr標籤設定虛線以及其他樣式的方法介紹，非常簡單易懂，希望對需要的朋友有所幫助！
以上是hr怎麼設定虛線樣式？多種hr樣式分享！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何在網頁網址列中新增特定圖示？下一篇：如何在網頁網址列中新增特定圖示？