您可能非常熟悉经典的链接样式。 蓝色带下划线。 有一种稍微更美观一点的替代方法可以实现相同的效果。
以下是代码
a {
text-decoration: none;
background: url(link-line.gif) repeat-x 0 100%;
padding-bottom: 1px;
}将背景位置的x设置为0，y设置为100%，将背景图像放置在文本底部，并将padding-bottom设置为1px，使文本和背景图像之间的距离为1px。
查看实时示例，其中包含另一个示例，扩展了使用图像作为下划线的可能性。
它也适用于底部边框……或者我错了？
我也想知道为什么图像在边框上。仅仅是个人喜好问题吗？
我认为Volkan只是指出，有多种方法可以解决问题。拥有选择总是好的。
此外，请查看示例页面上的最后一个示例，它使用了渐变效果，这只能通过图像实现。
我喜欢这个选项，但我个人更喜欢底部边框的想法，因为有些人确实会关闭图像。
但它确实让我了解了一些解决问题（或链接）的“其他”方法。
是的，您也可以使用border-bottom，但我认为背景图像可以提供更多关于下划线的控制能力。您可以使用更多颜色和更美观的点线。
正如Chris指出的那样，您甚至可以创建渐变下划线。
我希望有一种方法可以创建真正的“渐变下划线”。很糟糕的是，我们无法定义在background属性中使用的图像的宽度或拉伸。这可以通过多层和JavaScript来实现，但这对于如此“简单”的效果来说太耗时了。希望CSS3能让我们更好地控制background属性。
@Dennison：我同意你的看法。是的，CSS3中已经对背景提供了更好的支持。Safari已经支持多个背景，这将使我们能够轻松创建“真正的渐变”下划线。我们只希望IE的下一个版本也支持它。
您关于Safari中多个背景的观点是正确的。您还提到了一个关于IE兼容性的非常重要的注意事项。由于它_仍然_是主要的浏览器，因此很难忽视IE，我们不得不为可怜的IE用户编写解决方法。
这篇文章让我想起了ALA上这篇文章旧文章。它为等式增加了一个重要的部分
white-space: nowrap;它允许您将下划线放置在通常会换行的链接上。我在许多情况下都使用了这种技术
http://www.mandraccia.com/
http://www.clearvieweyes.com/
http://www.signatureplasticsurgery.com/
取得了良好的成功。很有趣。如果您为内容提供了健康的行间距（我通常使用1.5倍），则边框将无法正常工作，因为边框位于额外空间的底部。
@Andrew：关于white-space属性的提醒很棒！我喜欢ALA中带有动画悬停效果的示例，如果您以更微妙的方式实现它，那将会非常有趣。
您链接到的设计网站非常棒！您确实在其中提供了一些关于链接可以实现的优雅且有趣的示例。
好的，我在StumbleUpon上发现了这个页面，我看了看，心想……什么？，我继续看……然后向前倾，靠近屏幕，我检查了字体、拼写和字母之间的间隙，仍然看不见它……然后我看到了，一条浅蓝色的线。
这时烟花开始绽放，我欣喜若狂，尤里卡，他们发现了一种更浅的蓝色……它呈现为一条细线。
讽刺？我？
从不。
Wolfie！
它真的很特别，Chris。
感谢Chris，我也想感谢Andrew提供的ALA文章。
这难道不是那种视觉差异很小，但却以愚蠢的方式破坏事物类型的调整吗？如果我关闭了图像——也许我正在使用手机，或者只是网速慢，或者是一个基于文本的浏览器，我的浏览器很可能会遵循“text-decoration: none”，但不会包含图像。因此，我无法判断您那稍有不同的链接是否真的是一个链接。
我意识到有许多来自不同背景的人来到网络；我猜作者来自印刷背景，在那里最终结果才是最重要的。在网络上，上下文和语义也很重要，这是一个经典的例子，它为了——正如我的StumbleUpon同伴Wolfie指出的那样——几乎难以察觉的美学变化而忽略了丰富而有用的元数据（它是一个链接！）。
我不认为一点填充会让它更好看。我喜欢鼠标悬停时颜色不同的想法。