第三种 CSS 下划线

2004-06-07 18:23:08转载

发现[url=http://www.isaacmao.com/]毛向辉的 Blog[/url] 的链接下划线有点意思，居然是会动的图片，一查 [url=http://www.isaacmao.com/imc_styles.css]CSS[/url]，果然：

[quote]
.main a:hover, a:active{
background:url(http://www.isaacmao.com/images/arrow.gif) repeat-x 100% 100%;
}
[/quote]

这算是第三种下划线吧。缺点是必须用在相同字型号上，例如在毛的那个页里，小字的“comment”等就和图片有些重叠了。

再补全一下，最正统的第一种方法是 [color=blue]text-decoration: underline[/color]，第二种是从 [url=http://www.war3cn.com]war3cn.com[/url] 看到的，居然对 a 标签用 border-bottom 属性，很另类，不过有时候也确实需要，因为 border 的定义可以丰富些：border-color、border-style、border-width，比方说要是来个虚线，或者线的颜色和文字不同，就需要这种方法了，不过 border 在内容最外圈，因此要比 underline 要低一些，平时最好还是用第一种方法。

另外前几天还看到一个 CSS 小技巧，给 img 来个 background 属性，这样在 loading 的过程中就不是单一的透明色了，不过好像一般网站这个的实用性也不大。