CSS：自定义的和丰富多彩的网页链接下划线
CSS本身并没有直接提供转换HTML链接和下划线的功能，但是通过一些技巧，我们可以使单调的Web链接下划线变得丰富多彩。1。基本原则
首先，自定义HTML链接下划线的第一步是创建一个在水平方向重复图形的图形，形成下划线效果。如果要显示下划线后面的背景，可以使用透明的GIF图形。
其次，如果有下划线的图的高度是大的，就必须适当地增加文本的高度，以便在一行文本的底部和下一行文本的顶部之间有较大的空间，例如，行高度：1.5；}。
自定义链接下划线的示例
第三，为了显示自定义下划线，默认的下划线必须隐藏，即，{文本装饰：无；}。
第四、链接的元素设置下划线图形，并建立一个自定义下划线。如果在图underline.gif，CSS代码设置下划线图是{背景图像：URL（下划线。GIF）；}。
第五，我们应该让划线图在水平方向上重复出现，但它不能在垂直方向重复，否则它将隐藏在背后的文本，代码需要强调只能在水平方向的重复：一个{背景重复：repeat-x；}。
第六、为了保证图形显示链接文本下（无论大小、字体），采用背景位置属性把图的连接单元的底部，强调图形如箭，你也可以考虑在水平方向图形的对齐方式。假设你想将划线图在右下角，和CSS代码：一个{背景位置：100% 100%；}。
第七、为了留下空间的自定义图下面的链接文本，一个合适的坯料必须添加，强调图形的相对位置是相对于文本的大小，但总的来说，底部的空白是划线图的高度，调整是必要的，如果必要的。例如，一个{填充底：4px；}。
第八，因为下划线图放置在链接元素的底部，所以我们必须确保链接不折叠。如果我们允许链接到跨多个行，会有习惯强调低于线下环节。CSS的白色空间的性质可以防止链接文本折叠，即一个{白空间：nowrap；}。
总之，定义链接元素CSS样式属性的完整例子如下：
一个{
U3000 U3000 U3000
文字装饰：无；
U3000 U3000 U3000
背景：URL（下划线。GIF）repeat-x 100% 100%；
U3000 U3000 U3000
座垫：4px；
U3000 U3000 U3000
白色的空间：不换行；
U3000 U3000
}
如果您希望自定义下划线仅在鼠标停留时才显示，只需更改直接设置在链接元素上的CSS背景属性即可悬停：例如，
一个{
U3000 U3000 U3000
文字装饰：无；
U3000 U3000 U3000
座垫：4px；
U3000 U3000 U3000
白色的空间：不换行；
U3000 U3000
}
答：悬停{
U3000 U3000 U3000
背景：URL（下划线。GIF）repeat-x 100% 100%；
U3000 U3000
}
两。实例赏析
假设有两个下划线图形diagonal.gif（波纹线）和flower.gif（花）前高和宽是3, 9，后者是高和宽为11, 15。以下是一个完整的设置两强调的例子：
自定义链接下划线的示例
该网页的源代码如下所示：
U3000 U3000
注：diagonal.gif和flower.gif已经复制到同一目录下的网站位于。
U3000 U3000
U3000 U3000
U3000 U3000
前任
U3000 U3000
一个# example1a {
U3000 U3000
文字装饰：无；
U3000 U3000
背景：URL（对角线.gif）repeat-x 100% 100%；
U3000 U3000
白色的空间：不换行；
U3000 U3000
座垫：2px；
U3000 U3000
}
一个# example1b {
U3000 U3000
文字装饰：无；
U3000 U3000
白色的空间：不换行；
U3000 U3000
座垫：2px；
U3000 U3000
}
一个# example1b：悬停{
U3000 U3000
背景：URL（对角线.gif）repeat-x 100% 100%；
U3000 U3000
}
一个# example2a {
U3000 U3000
文字装饰：无；
U3000 U3000
背景：URL（花.gif）repeat-x 100% 100%；
U3000 U3000
白色的空间：不换行；
U3000 U3000
座垫：10px；
U3000 U3000
}
一个# example2b {
U3000 U3000
文字装饰：无；
U3000 U3000
白色的空间：不换行；
U3000 U3000
座垫：10px；
U3000 U3000
}
一个# example2b：悬停{
U3000 U3000
背景：URL（花.gif）repeat-x 100% 100%；
U3000 U3000
}
-->
U3000 U3000
U3000 U3000
U3000 U3000
例子:
U3000 U3000
波纹钢丝的静态下划线，
U3000 U3000
当鼠标停留时出现的波纹线。
U3000 U3000
花是静态下划线的。
U3000 U3000
当老鼠停留时，花朵就划出了花的轮廓。
U3000 U3000
U3000 U3000