你未必知道的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;
}

演示

在这演示中，我们没有使用简写形式，而是分开描述每个属性。这是可以更好的保证浏览器的向后兼容，使那些目前不支持这种写法的浏览器也不受影响。