下划线【专题】

昨天我们写到了添加下划线和去除下划线的方法，今天我又给大家介绍几种：

您可以在链接的底部应用边框，从而可以控制下划线的颜色（而下划线text-decoration仅应用与链接本身的文本颜色相同的下划线）以及边框的样式：

a {
    text-decoration: none;
    border-bottom: 2px dotted #0c0;
}

图片

将更有趣的下划线应用于链接的另一种方法是使用与链接底部对齐且水平重复的小背景图像：

p {
    line-height: 2;
}

a {
    text-decoration: none;
    padding-bottom: 5px;
    background: url(images/underline_greenspots.gif) bottom repeat-x;
}

如果使用这种方法，则需要确保包含块（在本例中为段落）具有下划线的空间。通常，您还需要在链接的底部添加一些填充，以使背景图像位于文本下方，而不是文本下方。

转场

当光标悬停在CSS链接上时，可以打开和关闭基本下划线，如下所示：

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

过渡使您可以对此进行更多控制，并且您可以保持下划线，而不仅仅是显示和隐藏下划线，而是可以在两种颜色之间淡入淡出：

a {
    color: rgb(0,102,204);
    text-decoration: none;
    border-bottom: 2px solid rgba(0,102,204,.2);
    -webkit-transition: .5s;
    transition: .5s;
}

a:hover {
    border-color: rgb(0,102,204);
}

这将以半透明的褪色下划线开始，当链接悬停在其上时，该下划线将平滑地变为稳定的蓝色。

⚠前面的示例使用RGBa，Internet Explorer 8及以下版本不了解。如果您要适应较旧的浏览器，请记住在RGBa颜色旁边添加备用纯色。因此，例如，如果您的链接显示在白色背景上，则可以放置border-bottom: 2px solid rgb(204,224,245);在前面（或者代替，如果您不关心透明度）border-bottom: 2px solid rgba(0,102,204,.2);

©️李联华的博客网 当前IP地址：3.144.7.118，归属地:俄亥俄州Dublin ，欢迎您的访问！