链接下划线可以改变颜色吗?下面给大家讲解如何利用CSS改变连接下划线颜色。
我们在进行Web页面设计的时候,根据不同的需要,可能会想要去除链接下划线的效果。而此效果只需要一句话就可以解决了。代码如下:
text-decoration:none;
如果保留着链接文字的下划线,默认的颜色属性是如链接文字同样的颜色,看下面的例子:
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
如果我们想让链接下划线的颜色与链接文字的颜色不同,怎么做呢?自定义链接文字下划线的颜色,我们有两种方法可以实现。第一种是border的方法,第二种是视觉错位的方法。
border方法的实例如下:
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
视觉错位的方法如下:
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
视觉错位的方法其实是加上一个span标签,并定义此标签的颜色,让其与链接文字下划线的颜色区别开来。以达到改变链接文字下划线改变的效果。
如何将链接的下划线做成虚线?
我们在浏览网页的时候,经常可以看到链接的下划线是虚线,或者在link与hover不同状态,下划线会从虚线到实线的变化。这样的效果是如何实现的呢?
其实这样的效果,是设置text-decoration:none。也就是去除了链接的下划线。然后再给链接加下边框线,设置下边框线不同的宽度、线型、颜色,就可以实现“下划线”变成多样效果。可以参考关于border-style的属性。
文章整理:西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!




