如何將鏈接的下劃線做成虛線代碼

我們在瀏覽網頁的時候，經常可以看到鏈接的下劃線是虛線，或者在link與hover不同狀態，下劃線會從虛線到實線的變化。這樣的效果是如何實現的呢？

其實這樣的效果，是設置text-decoration:none。也就是去除了鏈接的下劃線。然后再給鏈接加下邊框線，設置下邊框線不同的寬度、線型、顏色，就可以實現“下劃線”變成多樣效果。可以參考關于border-style的屬性。

提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

代碼如下

<style type="text/css">
<!-- 
a.texta { 
	text-decoration:none;
	border-bottom:1px dashed #ccc;
	color:#c00;
} 
a.texta:hover { 
	border-bottom:1px solid #c00;
	color:#666;
}

a.textb { 
	text-decoration:none;
	border-bottom:1px dashed #ccc;
	color:#069;
} 
a.textb:hover { 
	border-bottom:1px dashed #c00;
	color:#000;
}
-->
</style>
<a href="http://www.yibuxinxi.cn" class="texta">www.yibuxinxi.cn</a><br /><br />
<a  class="textb">小高教學網</a>

<p>查找更多代碼，請訪問：<a  target="_blank">小高教學網</a></p>