CSS3的漸變屬性的疑惑

問題描述

background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));

沒見過這種語法格式欸，有點不懂什么啥意思

見過的都是這種格式background: linear-gradient(direction, color-stop1, color-stop2, ...);

關于第一種格式希望大神能解析一下并且推薦一些資料謝謝！

問題解答

這是webkit內核漸變的老式書寫規則:-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規則;例如:background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

webkit-是兼容前綴，它告訴-webkit-內核的瀏覽器采用自己的方法來實現后綴后面的樣式，一般完整的兼容前綴是：

{ -webkit-style: value; -moz-style: value; -ms-style: value; -o-style: value; style: value;}

這樣瀏覽器就能自動識別支持的那一個樣式。比如用chrome，它是-webkit-內核，因此只識別-webkit-前綴的樣式和沒有前綴的樣式。-webkit-前綴告訴chrome用自己的實現方式渲染漸變，但最終樣式依然由沒有前綴的樣式決定。