css本身没有直接提供变换html链接下划线的功能，但只要运用一些技巧，我们还是可以让单调的网页链接下划线变得丰富多彩。
一、基本原理
首先，自定义html链接下划线的第一步是创建一个图形，在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景，可以使用透明的.gif图形。
其次，如果下划线图形的高度较大，则必须适当增加文本的高度，使得一行文本的底部与下一行文本的顶部之间有较大的空间，例如p { line-height: 1.5; }。
如果要让自定义下划线只在鼠标停留时出现，只要把原来直接设置在链接元素上的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>
Java Asp PHP .Net XML C/C++ CGI VB Jsp J2ee J2se J2me EJB Servlet Tomcat Resin Struts Weblogic Eclipse ANT GUI JMS Web servise IDEA Webphere Hibernate Spring Jboss Applet Swing Socket Javamail Perl Ajax P2P 安全 模式 框架 测试 开源 游戏
Windows XP Windows 2000 Windows 2003 Windows Me Windows 9.x Linux UNIX 注册表 操作系统 服务器 应用服务器
