html a text decoration,你未必知道的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代码

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;

}

演示

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值