§ ITPOW >> 文档 >> CSS

自定义多彩超链接下划线

作者:vkvi 来源:ITPOW(原创) 日期:2007-11-6

CSS 可以指定下划线,而本例是通过技巧实现自定义多彩超链接下划线的效果,本效果兼容 IE、Firefox、Opera、Netscape 等浏览器。

原理

利用 CSS 为超链接添加背景作为下划线。

关键

  • line-height:150%; 设置适当的行距
  • padding-bottom:2px; 留出空白便于显示下划线图片
  • text-decoration:none; 取消自带的下划线
  • background-image:url("u1.gif"); 用背景图片作为下划线
  • background-position:center bottom; 背景水平居中、垂直居下显示
  • background-repeat:repeat-x; 背景只在水平方向重复
  • white-space:nowrap; 超链接不换行,如果换行则只有最后一排文字有效果

示例


[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

相关阅读

相关文章