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

利用CSS，链接下划线也玩自定义 利用CSS，链接下划线也玩自定义2010年11月26日星期五上午03：47 这个静态的下划线和这个翻转效果可用于流行时尚设计。 宝贝，这个静态下划线和这个翻转效果很帅吧。 这个静态下划线和这个动画翻转效果可用于显示外部链接 (动画翻转效果并非能在所有浏览器都显示，例如Safari 1.0，只能显示动画的第一帧)。 原文链接：CSS Design：Custom Underlines 由A List Apart杂志及作者授权翻译。(Translated with the permission of AList Apart Magazineand 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：r