利用CSS，链接下划线也玩自定义

204 阅读 0 评论 135 点赞

我是靠谱客的博主无语皮卡丘，最近开发中收集的这篇文章主要介绍利用CSS，链接下划线也玩自定义，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

　　原文链接：CSS Design: Custom Underlines

　　由 A List Apart 杂志及作者授权翻译。（Translated with the permission of A List Apart Magazine and the author[s].）

　　说明：文章中“[补充]”内容系译者所补充添加（来自 CSS 2.0 中文手册），目的是方便读者理解相关内容。

　　虽然网页设计师通常有大量的方法控制文档如何呈现，但是基本的CSS不能为页面中链接下方的下划线样式提供很多选择。不过只需一点小技巧，你就能获得链接样式显示方式的创作控制。

　　自定义下划线给一些合适的网站以新的创作机会。自定义下划线还能够被用于为包含在同一个页面中的不同链接提供额外的视觉线索。

</iframe>

开始

　　你应该从为你下划线创建图形开始。该图将会水平的重复，而如果你希望（网页）背景能够完全显示的话，你需要创建一个透明的.gif文件。

　　如果你的下划线图形有几像素高，那么你应该增加的文本的line-height（行距），以增加上一行底部与下一行顶部的之间的空间。

p { line-height: 1.5; }

-------------------------------------------------

[补充]

语法：

　　line-height : normal | length

取值：

　　normal : 默认值。默认行高
　　length : 百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位

说明：

　　检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
　　行高是字体下延与字体内部高度的顶端之间的距离。为负值的行高可用来实现阴影效果。
　　假如一个格式化的行包括不止一个对象，则最大行高会被应用。在这种情况下，此属性不可以为负值。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 lineHeight 。

-------------------------------------------------

　　在能为链接创建自定义下划线之前，我们需要移除已经存在的下划线：

a { text-decoration: none; }

-------------------------------------------------

[补充]

语法：

　　text-decoration : none || underline || blink || overline || line-through

取值：

　　none : 默认值。无装饰
　　blink : 闪烁
　　underline : 下划线
　　line-through : 贯穿线
　　overline : 上划线

说明：

　　检索或设置对象中的文本的装饰。
　　有 href 特性的 a ，以及 u ， ins 对象默认值为 underline 。
　　对象 strike ， s ， del ，默认值是 line-through 。
　　假如 none 值在属性声明的最后，所有的先前的其他取值都会被清除。例如，声明 text-decoration: underline overline blink none 等于声明 text-decoration: none 。
　　假如对象没有文本(如 img 元素)或者是空元素(如：)，此属性不会发生作用。
　　假如你设置 body 对象的此属性值为 none ， a 对象将依然保持其原有的下划线样式。除非你针对 a 对象声明此属性值。
　　指定块对象的此属性将影响其所有内联子对象。而此影响一旦发生，块对象容器最终会受到影响。
　　在IE4+中可用的值为 overline 和 blink 。虽然 blink 值被提供，但它不会被作用。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 textDecoration 。

-------------------------------------------------

　　为了创建自定义的下划线，我们为链接元素设置背景图像：

a { background-image: url(underline.gif); }

-------------------------------------------------

[补充]

语法：

　　background-image : none | url ( url )

取值：

　　none : 默认值。无背景图
　　url ( url ) : 使用绝对或相对 url 地址指定背景图像

说明：

　　设置或检索对象的背景图像。
　　当背景图像与背景颜色( background-color )都被设定了时，背景图片将覆盖于背景颜色之上。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 backgroundImage 。

-------------------------------------------------

　　我们希望这个图像在文本底部顺着水平方向重复而不是垂直方向，否则它就将显示在链接文本自身的后面。我们限制背景图像沿着X轴重复：

a { background-repeat: repeat-x; }

-------------------------------------------------

[补充]

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

取值：

repeat : 默认值。背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像仅在横向上平铺
repeat-y : 背景图像仅在纵向上平铺

说明：

　　设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 backgroundRepeat 。

-------------------------------------------------

　　不管字体的大小如何，为了保证我们的图像都出现在链接文本的下面，我们将要使用background-position（背景定位）属性定位图像至链接元素的底部。对于某些背景图形，例如箭头，对图像对齐元素的哪一边，你或许有自己的偏好。就我们这个例子而言，我们将背景置于底部的右边：

a { background-position: 100% 100%; }

-------------------------------------------------

[补充]

语法：

　　background-position : length || length
　　background-position : position || position

取值：

说明：

　　设置或检索对象的背景图像位置。必须先指定 background-image 属性。
　　该属性定位不受对象的补丁属性( padding )设置影响。
　　默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
　　如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。
　　如果设置值为 right center ，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。
　　对应的脚本特性为 backgroundPosition 。

-------------------------------------------------

　　为了给链接文本正文的自定义下划线图形创建空间，我们将增加一些padding（填充）。依赖于所使用字体的大小，下划线图形的精确位置将会相对于链接文本的基线发生改变。建议你从bottom-padding开始，与下划线图形高度同高，调整以适合于你的需要：

a { padding-bottom: 4px; }

-------------------------------------------------

[补充]

语法：

　　padding-bottom : length

取值：

　　length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。不允许负值。

说明：

　　检索或设置对象底边的内补丁。对于 td 和 th 对象而言默认值为 1 。其他对象的默认值为 0 。
　　在IE5.5+中此属性支持内联对象使用。而在此前的版本中，内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 paddingBottom 。

-------------------------------------------------

　　因为下划线图形是定位于链接元素的底部，所以我们需要保证链接不能横跨多行（如果他们被允许跨越多行，那么只有最低的一行链接文本显示自定义下划线）。我们将使用CSS的white-space属性禁止链接文本换行。

a { white-space: nowrap; }

-------------------------------------------------

[补充]

语法：

　　white-space : normal | pre | nowrap

取值：

　　normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行
　　pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。参阅 pre 对象
　　nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。参阅 noWrap 属性

说明：

　　设置或检索对象内空格字符的处理方式。
　　空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体来添加空格，用 br 元素来添加换行。
　　此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。
　　此属性作用于块对象。
　　此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
　　对应的脚本特性为 whiteSpace 。

-------------------------------------------------

　　链接元素的所有CSS属性可以合并为：

a {
    text-decoration: none;
    background: url(underline.gif) repeat-x 100% 100%;
    padding-bottom: 4px;
    white-space: nowrap;
}

　　如果你想自定义下划线的效果只在鼠标滑过链接时出现，只需设置CSS背景属性为:hover伪类，取代直接设置于链接元素上的样式即可。

a {
    text-decoration: none;
    padding-bottom: 4px;
    white-space: nowrap;
}

a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}