1. 爱易网页
  2. CSS教程
  3. webkit博客:CSS3线性突变样式语法

webkit博客:CSS3线性突变样式语法

日期：2013-12-13　 浏览次数：21053 次

网页制造aiyiweb文章简介：webkit对于CSS3渐变款式语法的更新.

之前，我在前端观察发表了一篇《理解CSS3线性渐变》，置信很多同学都有研讨过CSS3的渐变，大部分人都会感到纠结吧，webkit和firefox的语法有很大的不同啊。理想上，对比W3C规范，可以发现Firefox的语法更规范一些。如今好音讯来了，Webkit开始优化CSS3渐变的语法了。真搞不懂当年(08年)webkit为什么采用那种写法。

具体哪种写法更优秀就不讨论了，近日webkit在其博客中引见了渐变的新写法，新写法采用了W3C和Firefox所用的语法，即，将-webkit-gradient拆分为-webkit-linear-gradient和-webkit-radial-gradient。

让我们直接看一下具体的代码如何：

1
2
3
4
5

.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*/
}

当然，放射渐变也同样做了优化：

1
2
3
4
5

.selector{
background:-moz-radial-gradient(10% 30%, white, black);/*gradient for firefox*/
background:-webkit-radial-gradient(
                    
                    


                    

                    



    

        
相关资料更多>

    

    

        
    

            
                  
    
                      
  1. 
                        经过CSS类型的顺序改动翻腾效果
    2. 
                   
                
                  
    
                      
  2. 
                        看法阅读器：Firefox 阅读器
    3. 
                   
                
                  
    
                      
  3. 
                        小技巧：CSS列表标签出现效果的处置方法
    4. 
                   
                
                  
    
                      
  4. 
                        图片撑破: 图片太大图片撑破页面变形的解决方法
    5. 
                   
                
                  
    
                      
  5. 
                        最小高度100％页脚坚持在底部的规划方法
    6. 
                   
                
                  
    
                      
  6. 
                        :before和::before的区别
    7. 
                   
                
                  
    
                      
  7. 
                        契合WEB规范的网页图像的代码精简
    8. 
                   
                
                  
    
                      
  8. 
                        CSS运用基础教程(5) 文字性质
    9. 
                   
                
                  
    
                      
  9. 
                        CSS语法手册（三）文本填充，边框，边界和位置属性（一）
    10.