a hover显示下划线为虚线
时间：2007-12-27 来源：anglexiaomin
今天在一个漂亮的网站上看到了这个效果,以前自己做的都是显示实线,今天看到虚线居然不会了不知道怎么弄.大师叫用border-bottom,他让我看了１px，２px，３px的差距，真是长了见识．
<style>
a { text-decoration:none;}
a:hover { text-decoration:none;}
div { margin:20px;}
.test1 a:hover {border-bottom: dotted 1px;}
.test2 a:hover {border-bottom: dotted 2px;}
.test3 a:hover {border-bottom: dotted 3px;}
</style>
</head> <body>
<div class="test1"><a href="#">测试</a></div>
<div class="test2"><a href="#">测试</a></div>
<div class="test3"><a href="#">测试</a></div>
</body>
</html> 感谢恩师！
a { text-decoration:none;}
a:hover { text-decoration:none;}
div { margin:20px;}
.test1 a:hover {border-bottom: dotted 1px;}
.test2 a:hover {border-bottom: dotted 2px;}
.test3 a:hover {border-bottom: dotted 3px;}
</style>
</head> <body>
<div class="test1"><a href="#">测试</a></div>
<div class="test2"><a href="#">测试</a></div>
<div class="test3"><a href="#">测试</a></div>
</body>
</html> 感谢恩师！
相关阅读 更多 +
