由 A List Apart 杂志及作者授权翻译。（Translated with the permission of A List Apart Magazine and the author[s].） 说明：文章中“[补充]”内容系译者所补充添加（来自 CSS 2.0 中文手册），目的是方便读者理解相关内容。
虽然网页设计师通常有大量的方法控制文档如何呈现，但是基本的CSS不能为页面中链接下方的下划线样式提供很多选择。不过只需一点小技巧，你就能获得链接样式显示方式的创作控制。
自定义下划线给一些合适的网站以新的创作机会。自定义下划线还能够被用于为包含在同一个页面中的不同链接提供额外的视觉线索。
开始
你应该从为你下划线创建图形开始。该图将会水平的重复，而如果你希望（网页）背景能够完全显示的话，你需要创建一个透明的.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 元素)或者是空元素(如：<EM></EM>)， 此属性不会发生作用。
假如你设置 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 。
-------------------------------------------------
这个 静态的下划线和这个翻转效果可用于流行时尚设计。
宝贝，这个静态下划线和这个翻转效果很帅吧。
这个静态下划线和这个动画翻转效果 可用于显示外部链接
（动画翻转效果并非能在所有浏览器都显示，例如Safari 1.0，只能显示动画的第一帧）。
（出处：
设为首页
加入收藏
联系我们
减小字体
增大字体
站内广告
相关技术