呆丸北拜已搬家至 Blogger

給 <hr> 套用特定的 CSS，每次寫 <hr> 都能達到像這樣的最終效果：

首先決定 <hr> 裡使用的背景圖片。這裡是用一個 41x20 像素的圖片：


圖片高度是 20 像素，所以 <hr> 的高度也要 20 像素以便剛好裝下圖片：

<hr style=height:20px>

這是高度 20 像素的 <hr>

再用 background-image:url() 給 <hr> 加入背景圖片：

<hr style=height:20px;background-image:url(http://lh3.googleusercontent.com/-KkHFQgZIrY0/Ti6EnNsQ1ZI/AAAAAAAADtU/CrmqUcPKjiU/s800/warning.jpg)>

這是高度 20 像素加入背景圖片的 <hr>

最後用 border-style:none 把背景圖片外圈的邊框，也就是 <hr> 的邊框去掉：
（這一步測試的時候不要使用 IE8，不支援）

<hr style=height:20px;background-image:url(http://lh3.googleusercontent.com/-KkHFQgZIrY0/Ti6EnNsQ1ZI/AAAAAAAADtU/CrmqUcPKjiU/s800/warning.jpg);border-style:none>

這是高度 20 像素加入背景圖片並且去除邊框的最終效果 <hr>