問題描述

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

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

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

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

問題解答

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

webkit-是兼容前綴，它告訴-webkit-內(nèi)核的瀏覽器采用自己的方法來實(shí)現(xiàn)后綴后面的樣式，一般完整的兼容前綴是：

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

這樣瀏覽器就能自動(dòng)識別支持的那一個(gè)樣式。比如用chrome，它是-webkit-內(nèi)核，因此只識別-webkit-前綴的樣式和沒有前綴的樣式。-webkit-前綴告訴chrome用自己的實(shí)現(xiàn)方式渲染漸變，但最終樣式依然由沒有前綴的樣式?jīng)Q定。