如何用css把某div层的链接下划线做成虚线或阴影

看到有些网站的链接悬停下划线是虚线,咦这是怎么做的?在调节链接的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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注