巧用CSS自定義網頁下劃線樣式

CSS為網頁設計者們提供了豐富而靈活的頁面元素表現形式的控制手段。但是，或許你可能注意到了，對于下劃線，CSS提供的可選操作卻不是很多。一般情況下，人們看到的下劃線基本上都是橫直線，缺少生氣和靈動。不過，路并不是死的，通過一些絕妙的改造，我們還是可以做出富有創意的下劃線來使頁面更為美觀。?

　　這是一個自定義下劃線的例子：自定義的下劃線?。是不是很酷呢？除了能?
讓你的網頁呈現出一個與眾不同的風格之外，它還能對于文檔中不同的文字類型給與不同的視覺外觀，起到提醒或者著重的作用。?

　　下面我們就來一起學習如何自定義與眾不同的下劃線。?

　　首先，我們得先準備一幅作為下劃線的圖片。你可以利用先成的，也可以自己動手繪制。需要提醒注意的是，你所準備的圖片應該適合水平方向上的重復，最好還能使透明的GIF格式，這樣能夠確保背景不被遮擋。?

　　另外，如果你所準備的下劃線圖片在高度（粗細）上占用比較多的像素，那么，應當增加該行文本和下行文本之間的行距（line-height）空間，可以這么設定：?

　　p?{?line-height:?1.5;?}?

　　接下來要做的事情是取消原來默認的下劃線，這樣我們才能把自定義的下劃線應用到指定文本，使用如下的CSS設定（它的含義是讓超鏈接文字沒有任何修飾）：?

　　a?{?text-decoration:?none;?}?

　　好了，現在可以來創建自定義的下劃線了，這里，我們用準備的圖片設定為超鏈接元素的背景圖片，如下：?

　　a?{?background-image:?url(underline.gif);?}?

　　當然，文字的長度未必和原圖的長度相等，這就需要考慮圖片重復的問題，也就是說，應當把重復限定在水平方向的X軸上，可以如下設定：?

　　a?{?background-repeat:?repeat-x;?}?

　　還有個必須考慮的問題，就是字的大小改變怎么辦？要讓下劃線的圖片始終顯示在超鏈接文字的下方，而不必理會文字大小的話，我們應當使用CSS中的背景位置（background-position）屬性來定位圖片位于超鏈接元素色底部。而對于如箭頭這樣的下劃線圖片，還得考慮超鏈接的文本邊緣和圖片邊對齊。?下面的這個例子將下劃線背景圖片的位置限定在右下角：?

　　a?{?background-position:?100%?100%;?}?

　　如何控制自定義的下劃線圖片和文字之間的空白呢？這個可以通過增加填充（padding）來做到。下劃線圖片相對于超鏈接文本基線（baseline）的確切位置以來與所用的字的大小。建議你一開始將底部填充（bottom-padding）的大小設定同下劃線圖片的高度相等，然后再慢慢調整到合適位置（下面這個CSS設定超鏈接的底部填充為4像素）：?

　　a?{?padding-bottom:?4px;?}?

　　因為下劃線的圖片被定位在超鏈接元素的底部，所以需要確保所用的超鏈接文本沒有跨行，否則，只有處在最下面的超鏈接文本會出現自定義的下劃線了。怎么解決呢，那就是阻止超鏈接文本跨行產生，可以通過CSS的white-space屬性來完成：?

　　a?{?white-space:?nowrap;?}?

　　好了，把上面提到的這些超鏈接標記的CSS設定合并起來，結果如下：?

　　a?{?
text-decoration:?none;?
background:?url(underline.gif)?repeat-x?100%?100%;?
padding-bottom:?4px;?
white-space:?nowrap;?
}?

　　還記得有些超鏈接文本沒有下劃線，但是當鼠標移到它的上面的時候，下劃線就浮現出來的情況么？自定義的下劃線也可以做到這個效果，那就在:hover上設定超鏈接背景，而不是在超鏈接標記a上設定，如下：?

　　a?{?
text-decoration:?none;?
padding-bottom:?4px;?
white-space:?nowrap;?
}?

a:hover?{?
background:?url(underline.gif)?repeat-x?100%?100%;?
}?

　　怎么樣，是不是很簡單呢？在來看看一些例子和它們對應的CSS設定：?

　　靜態下劃線?

　　a#example3a?{?
text-decoration:?none;?
background:?url(‘/pic/200542191630940.gif’)?repeat-x?100%?100%;?
}?