畫底線的CSS超可愛~

同事 S 分享的，請看這篇網誌中：

http://www.chunmin.com/archives/41

有兩個畫底線的CSS很可愛~



這畫黃色和畫紅色的部分，是CSS哦! 可以偷學~~ ^O^

以下是這位大大的寫法：

/* Begin Underline*/
.hl{
line-height:22px;
padding:4px 2px 2px 0px;
letter-spacing:1px;
background:url(http://.../underline_hl.gif) repeat-x bottom
}

.cyc{
line-height:22px;
padding:4px 2px 2px 0px;
letter-spacing:3px;
background:white url(http://.../underline_cyc.gif) repeat-x bottom
}
/* End Underline*/

原理就是：
1. 有標hl或cyc class的文字加背景底圖，底圖是黃色手繪線或紅色手繪圈
2. 為配合底圖，文字的字距和行距要正確，比如說紅圈圈的那段，字距就要大一點

說穿了好像沒有了不起ho? 可是真的很可愛又有趣耶~~~ 讚!