你未必知道的CSS小知识：text-decoration属性变成了属性简写

我相信有些小知识会让你大吃一惊。

跟着最新的CSS规范，text-decoration现在的写法是这样的：

1. a {
   
2.   text-decoration: overline aqua wavy;
   
3. }

复制代码text-decoration属性现在需要用三种属性值来表示了：text-decoration-line, text-decoration-color, and text-decoration-style.

但不幸的是，目前只有火狐浏览器实现了对这些新属性的支持。

你可以用火狐浏览器试一试下面的演示：

HTML代码

1. <a href="#" id="a">IT'S ** WATER, PEOPLE
   
2. 
   
3. (You should see a wavy line on top. Currently works only in Firefox)

复制代码CSS代码

1. body {
   
2.   padding: 30px;
   
3.   text-align: center;
   
4.   font-family: Arial, sans-serif;
   
5. }
   
6. 
   
7. a, a:visited {
   
8.   color: blue;
   
9.   background: aqua;
   
10.   -moz-text-decoration-color: aqua;
    
11.   -moz-text-decoration-line: overline;
    
12.   -moz-text-decoration-style: wavy;
    
13.   text-decoration-color: aqua;
    
14.   text-decoration-line: overline;
    
15.   text-decoration-style: wavy;
    
16. }

复制代码
演示

一个好汉三个帮

(请用火狐浏览器观看这个演示，目前只有火狐浏览器实现了对它的支持)

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

via:http://www.webhek.com/the-text-d ... is-now-a-shorthand/

【你未必知道的CSS小知识：text-decoration属性变成了属性简写】相关文章

1. 你未必知道的CSS小知识：text-decoration属性变成了属性简写

2. 一个简单的CSS3文字动画插件textillate

3. CSS3 Glowing Text Effect

4. Web Inspector：在 Sublime Text 中调试 JavaScript 代码

5. [科普文] 关于浏览器内核的一些小知识，明明白白选浏览器

6. 你应该知道的CSS文字大小单位PX、EM、PT

7. Telefónica与Mozilla开拓基于HTML5互联网设备

8. CSS3的文字阴影—Text-Shadow

9. Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果

10. 15个程序员需要知道的Chrome扩展

本文来源：https://www.51html5.com/a1084.html