給 <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzi4A5hqSLaIsH5bYXTGeG9jy-RO2TLo4xMl0N_eb-nkX62w6t0y-H8kJ6efljayqcsWTnWHb6myXQ2jinVhUkTUcKRmXTZv54alxXnQxiBSjD8S-5uK6I1CEwKGhvqGp8wce2QHyq0w9B/s800/warning.jpg)>
這是高度 20 像素加入背景圖片的 <hr>
最後用 border-style:none 把背景圖片外圈的邊框，也就是 <hr> 的邊框去掉：
（這一步測試的時候不要使用 IE8，不支援）
<hr style=height:20px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzi4A5hqSLaIsH5bYXTGeG9jy-RO2TLo4xMl0N_eb-nkX62w6t0y-H8kJ6efljayqcsWTnWHb6myXQ2jinVhUkTUcKRmXTZv54alxXnQxiBSjD8S-5uK6I1CEwKGhvqGp8wce2QHyq0w9B/s800/warning.jpg);border-style:none>
這是高度 20 像素加入背景圖片並且去除邊框的最終效果 <hr>
沒有留言 :
張貼留言