教你將鏈接的下劃線做成虛線

本文章分享給大家學習的是教你如何將鏈接的下劃線做成虛線，我們在瀏覽網頁時，經常會碰到有的鏈接的下劃線是虛線，者在link與hover不同狀態(tài)，下劃線會從虛線到實線的變化。這樣的效果是如何實現的呢？下面是一個實例代碼，希望對大家有所幫助。

<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://tipsywinegypsy.com/" class="texta">tipsywinegypsy.com</a><br /><br />
<a href="http://tipsywinegypsy.com/" class="textb">tipsywinegypsy.com</a>

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