列举CSS自定义网页下划线样式的例子

  大家可以看下面的例子：
     首先，我们得先准备一幅作为下划线的图片。你可以利用先成的，也可以自己动手绘制。保证你所准备的图片应该适合水平方向上的重复，最好还能使透明的GIF格式，这样能够确保背景不被遮挡。
      另外，如果你所准备的下划线图片在高度（粗细）上占用比较多的像素，应当增加该行文本和下行文本之间的行距（line-height）空间，可以这么设定：
     

      接下来要做的事情是取消原来默认的下划线，这样我们才能把自定义的下划线应用到指定文本，使用如下的CSS设定（它的含义是让超链接文字没有任何修饰）：
     

  　现在可以来创建自定义的下划线了，我们用准备的图片设定为超链接元素的背景图片，如下：
    

　　当然，文字的长度不必和原图的长度相等，这就需要考虑图片重复的问题，应当把重复限定在水平方向的X轴上，可以如下设定：
      

      还有个问题，就是字的大小改变如何做？要让下划线的图片始终显示在超链接文字的下方，而不必理会文字大小的话，我们使用CSS中的背景位置（background-position）属性来定位图片位于超链接元素色底部。而对于如箭头这样的下划线图片，还得考虑超链接的文本边缘和图片边对齐。 下面的这个例子将下划线背景图片的位置限定在右下角：
     

      怎么控制自定义的下划线图片和文字之间的空白？我们可以通过增加填充（padding）来做到。下划线图片相对于超链接文本基线（baseline）的确切位置以来与所用的字的大小。建议你一开始将底部填充（bottom-padding）的大小设定同下划线图片的高度相等，然后再慢慢调整到合适位置（下面这个CSS设定超链接的底部填充为4像素）：
     

     因为下划线的图片被定位在超链接元素的底部，所以需要确保所用的超链接文本没有跨行，否则，只有处在最下面的超链接文本会出现自定义的下划线了。如何办呢，那就是阻止超链
接文本跨行产生，可以通过CSS的white-space属性来完成：
    

     把上面提到的这些超链接标记的CSS设定合并起来，如下：
 

     还记得有些超链接文本没有下划线，当鼠标移到它的上面的时候，下划线就浮现出来的情况么？自定义的下划线也可以做到这个效果，那就在:hover上设定超链接背景，而不是在超链
接标记a上设定，如下：
 

这样看来是很简单的，在来看看一些例子和它们对应的CSS设定：

静态下划线