如何用css把某div层的链接下划线做成虚线或阴影
feilong.org 修订于2009-05-26 01:32:39 409 次浏览看到有些网站的链接悬停下划线是虚线，咦这是怎么做的？在调节链接的text-decoration时，怎么就没发现虚线这个属性值啊？查阅有关资料，原来不是用text-decoration，而是用border-bottom的属性做的css样式。
又有人问，如果不想把所有链接下划线做成虚线，只想把某特定div层里面的链接悬停下划线做成虚线，该怎么做呢？这就是css里面的id标签和链接标签的综合运用了。也就是说，此时的链接不再是网页全局链接，而是某个div层之局部链接。
针对这两个问题，飞龙整理一下解决方法。本文更新地址：http://feilong.org/css-link-dash-border 不定期修订。
一、如何用css把某div层的链接下划线做成虚线
设置text-decoration:none。也就是去除了链接的下划线。然后再给链接加下边框线，设置下边框线不同的宽度、线型、颜色，就可以实现“下划线”变成多样效果。
<style>
#linkstyle a.hover {
text-decoration:none;
border-bottom:1px dashed #ccc;
color:#c00;
}
</style>
<div id="linkstyle"><a href="http://feilong.org/">feilong.org</a><div>
二、如何用css把某div层的链接下划线做成投影
很简单，投影就是把border的width加大，把color变浅即可。css样式调整如下：
<style>
#linkstyle a.hover {
text-decoration:none;
border-bottom:1px dashed #ccc;
color:#c00;
}
</style>
<div id="linkstyle"><a href="http://feilong.org/">feilong.org</a><div>
更新网址：https://feilong.org/css-link-dash-border
最初发布：20090526 01:32:39 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发
