CSS本身沒有直接提供變換HTML連結底線的功能，但只要運用一些技巧，我們還是可以讓單調的網頁連結底線變得豐富多彩。
一、基本原理
首先，自訂HTML連結底線的第一步是建立一個圖形，在水平方向重複放置這個圖形即形成底線效果。如果要顯示出底線背後的網頁背景，可以使用透明的.gif圖形。
其次，如果底線圖形的高度較大，則必須適當增加文本的高度，使得一行文本的底部與下一行文本的頂部之間有較大的空間，例如p { line-height: 1.5; }。
第三，為顯示出自訂的底線，必須隱藏預設的底線，即a { text-decoration: none; }。
第四，為連結元素設定底線圖形，構造出自訂的底線。假設底線圖形是underline.gif，則設定底線圖形的CSS代碼為a { background-image: url(underline.gif); }。
第五，我們要讓底線圖形在水平方向反覆出現，但不能在垂直方向重複出現，否則它將被隱藏到文本的背後。要求底線只在水平方向重複出現的代碼為：a { background-repeat: repeat-x; }。
第六，為保證圖形出現在連結文字的下方（不管字型的大小），用background-position屬性將圖形放在連結元素的底部。對於箭頭之類的底線圖形，可能還要考慮圖形在水平方向的對齊方向。假設要將底線圖形放在右下角，CSS代碼為：a { background-position: 100% 100%; }。
第七，為了在連結文本的下方給自訂圖形留出空間，必須加入適當的空白。底線圖形相對於連結文字的具體位置與文字的大小有關，但一般而言，可以先讓底部空白等於底線圖形的高度，必要時再作調整。例如：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;
}
如果要讓自訂底線只在滑鼠停留時出現，只要把原來直接設定在連結元素上的CSS background屬性改到:hover ，例如：
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
二、執行個體欣賞
假設有兩個底線圖形diagonal.gif（波紋線）、flower.gif（花朵）前者的高、寬是3、9，後者的高、寬是11、15。下面是一個設定兩種底線的完整執行個體：
網頁原始碼如下：
註：diagonal.gif 和 flower.gif已經先拷貝到網頁所在的同一目錄下。
<html>
<head>
<title>ex</title>
<style type="text/css">
a#example1a {
text-decoration: none;
background: url(diagonal.gif) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 2px;
}
a#example1b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 2px;
}
a#example1b:hover {
background: url(diagonal.gif) repeat-x 100% 100%;
}
a#example2a {
text-decoration: none;
background: url(flower.gif) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px;
}
a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 10px;
}
a#example2b:hover {
background: url(flower.gif) repeat-x 100% 100%;
}
-->
</style>
</head>
<body>
<p>執行個體：</p>
<p> <a href="#" id="example1a">波紋線靜態底線</a>，
<a href="#" id="example1b">滑鼠停留時出現的波紋線</a>。</p>
<p> <a href="#" id="example2a">花朵靜態底線</a>，
<a href="#" id="example2b">滑鼠停留時出現的花朵底線</a>。</p>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
