β

使用图片与css自定义网页a标签的下划线样式

郭碗瓢盆 294 阅读

 网页A标签的下划线样式其实可以多众多样,不仅仅是一条线而已。使用图片,结合简单的css,可以将A标签的下划线变的更加漂亮。

 链接元素的所有CSS属性可以合并为:

a {
    text-decoration: none; 
    background: url(underline.gif) repeat-x 100% 100%;
    padding-bottom: 4px;
    white-space: nowrap;
}

 如果你想自定义下划线的效果只在鼠标滑过链接时出现,只需设置CSS背景属性为:hover伪类,取代直接设置于链接元素上的样式即可。

a {
    text-decoration: none;
    padding-bottom: 4px;
    white-space: nowrap;
}
a:hover {
    background: url(underline.gif) repeat-x 100% 100%;
}
 来自:http://www.peixunfei.com/Guestbook.asp?id=1112


作者:郭碗瓢盆
记录美好生活的过程!
原文地址:使用图片与css自定义网页a标签的下划线样式, 感谢原作者分享。

发表评论