CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 你未必知道的CSS小知识:text-decoration属性变成了属性简写

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

CSS3教程  手机阅读


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

跟着最新的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. (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. a, a:visited {
  7.   color: blue;
  8.   background: aqua;
  9.   -moz-text-decoration-color: aqua;
  10.   -moz-text-decoration-line: overline;
  11.   -moz-text-decoration-style: wavy;
  12.   text-decoration-color: aqua;
  13.   text-decoration-line: overline;
  14.   text-decoration-style: wavy;
  15. }
复制代码
演示

一个好汉三个帮

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

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

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

点击展开全部
上一篇:使用CSS3设计漂亮的动画效果3D大按钮 下一篇:8款超酷实用的CSS3 Tab菜单集合

﹝你未必知道的CSS小知识:text-decoration属性变成了属性简写﹞相关内容

「你未必知道的CSS小知识:text-decoration属性变成了属性简写」相关专题

css text-decoration
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢