給 <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>


呆丸北拜 發表在 痞客邦 PIXNET 留言(0) 人氣()