css超链接下划线

css超链接下划线往下隔开一段距离的两种实现方法

css underline style  without text-decoration

经常使用的超链接的CSS样式,带下划线通常采用”text-decoration:underline” 普通情况下,很好用,但是当字体加粗或者对h1~h3比较大的字体加下划线时,会发现下划线与超链接连在一起,很不雅观。于是便有了将超链接下划线与文本链接往下隔开一段距离的要求。这里采用的是用首先设置text-decoration:none,然后设置border-bottom,只需设置为solid 即可,最后padding-bottom往下隔开一段像素距离如3px,可以完美实现将下划线往下隔开一段距离的要求。

a.cls-underline-1{

text-decoration:none;

border-bottom:solid /*设置为solid就可以了*/

padding-bottom:3px; /*设置下方隔开距离此处为3像素*/
}

Examples:
css underline style
css underline style
css underline style
css underline style

当然,还有一种方式更为简单一些,就是直接设置一个图片作为超链接的背景,背景图片里定制好下划线的位置。也可以采用background-position来辅助调整一下。采用此种方式,可以通过替换背景图片为动态的gif图片制作更炫的效果,而且图片的下划线可以制作的更丰富一些。

a.cls-underline-2{

text-decoration:none;

background:url(alink-background.jpg);

background-position: left+px top+px;/*当背景图片设计的不够好时,可以采用此设置来调整位置*/

pading-bottom:3px;/*设置下方隔开距离此处为3像素*/

}
Examples:
css underline style

1 comment to css超链接下划线

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Protected by WP Anti Spam