巧用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; }