你未必知道的CSS小知识:text-decoration属性变成了属性简写
我相信有些小知识会让你大吃一惊。
跟着最新的CSS规范,text-decoration
现在的写法是这样的:
a { text-decoration: overline aqua wavy; }
text-decoration
属性现在需要用三种属性值来表示了:text-decoration-line
, text-decoration-color
, and text-decoration-style
.
但不幸的是,目前只有火狐浏览器实现了对这些新属性的支持。
你可以用火狐浏览器试一试下面的演示:
HTML代码
<a href="#" id="a">IT'S LIKE WATER, PEOPLE(You should see a wavy line on top. Currently works only in Firefox)
CSS代码
body { padding: 30px; text-align: center; font-family: Arial, sans-serif; } a, a:visited { color: blue; background: aqua; -moz-text-decoration-color: aqua; -moz-text-decoration-line: overline; -moz-text-decoration-style: wavy; text-decoration-color: aqua; text-decoration-line: overline; text-decoration-style: wavy; }
演示
在这演示中,我们没有使用简写形式,而是分开描述每个属性。这是可以更好的保证浏览器的向后兼容,使那些目前不支持这种写法的浏览器也不受影响。
THE END
二维码