css3 设置超链接 下划线

CSS3可以让我们轻松的改变超链接下划线的样式。在这篇文章里，我们将学习如何使用CSS3设置超链接下划线。

a {
    text-decoration: none;
     /* 取消下划线 */border-bottom: 2px solid black;
 /* 设置下划线为实线黑色，下同 */}
a:hover {
    border-bottom: 2px dashed red;
 /* 鼠标悬停时下划线改为虚线红色 */}
a:visited {
    border-bottom: 2px dotted blue;
 /* 已访问链接下划线改为点状蓝色 */}
a:focus {
    outline: none;
     /* 取消聚焦时的虚线框 */border-bottom: 2px double green;
 /* 聚焦时下划线改为双线绿色 */}
    

以上CSS代码将取消超链接的默认下划线，然后设置不同状态下的下划线样式。当鼠标悬停超链接时，下划线将变成虚线红色；当链接被点击过后，下划线将变成点状蓝色。此外，我们还用:focus伪类设置了聚焦状态下的下划线为双线绿色。

这些样式只是示例，你可以根据自己的需求设置不同的下划线样式。只要在a标签里使用:border-bottom属性即可。 CSS3的这个属性提供了很多选项，包括线条类型、颜色和粗细等等。

最后，注意一点。有些人可能喜欢用text-decoration属性来设置下划线，但是一定要注意的是，它不仅会改变下划线的样式，还会改变超链接其他部分（如字体颜色和大小）的样式。而:size属性只会改变下划线的样式，不影响其它部分的样式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！