webkit对于CSS3渐变样式语法的更新
浏览:1661次 出处信息
之前,我在前端观察发表了一篇《理解CSS3线性渐变》,相信很多同学都有研究过CSS3的渐变,大部分人都会感到纠结吧,webkit和firefox的语法有很大的不同啊。事实上,对比W3C规范,可以发现Firefox的语法更规范一些。现在好消息来了,Webkit开始优化CSS3渐变的语法了。真搞不懂当年(08年)webkit为什么采用那种写法。
具体哪种写法更优秀就不讨论了,近日webkit在其博客中介绍了渐变的新写法,新写法采用了W3C和Firefox所用的语法,即,将-webkit-gradient拆分为-webkit-linear-gradient和-webkit-radial-gradient。
让我们直接看一下具体的代码如何:
以下是代码片段: .selector{ background:-moz-linear-gradient(left, white, black);/*gradient for firefox*/ background:-webkit-linear-gradient(left, white, black);/*new gradient for webkit */ background:-webkit-gradient(linear, 0 0, 0 100%, from(#white), to(#black));/*the old grandient for webkit*/ } |
当然,发射渐变也同样做了优化:
以下是代码片段: .selector{ background:-moz-radial-gradient(10% 30%, white, black);/*gradient for firefox*/ background:-webkit-radial-gradient(10% 30%, white, black);/*new gradient for webkit */ background:-webkit-gradient(radial, 0 10%, 0 30%, from(#white), to(#black));/*the old grandient for webkit*/ } |
需要注意的是,新的渐变语法只被部署到了nightly build版本的webkit上,safari和chrome都尚未真正实现,但是估计不远了吧~~
建议继续学习:
- 理解CSS3线性渐变 (阅读:2230)
- 渐变背景上的内容垂直居中 (阅读:2208)
- CSS3 文字渐变 (阅读:1877)
- Query Forwarding in Geographically Distributed Search Engines (阅读:1848)
- CSS Gradient详解 (阅读:1215)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇::before和::before的区别
后一篇:CSS3 target伪类简介 >>
文章信息
- 作者:神飞 来源: 前端观察
- 标签: 渐变 线性
- 发布时间:2011-01-17 23:01:47
建议继续学习
近3天十大热文
- [16] Go Reflect 性能
- [14] iOS可视化编程 Tips 之“无需代码设置
- [13] 浅谈Web安全验证码
- [13] iTerm2 (Mac Terminal)
- [12] 界面设计速成
- [12] 基于HTTP缓存轻松实现客户端应用的离线支持
- [12] osx平台上lol英雄联盟launcher启
- [11] 公钥私钥加密解密数字证书数字签名详解
- [11] 手把手教你CSRF防护
- [11] Android设计中的.9.png