webkit內核的Safari、 Chrome的Linear Gradients線性漸變在線代碼生成器

簡介:該工具主要用于在線自動生成CSS3線性漸變代碼,輕輕松松兼容webkit內核的Safari和Chrome瀏覽器。
推薦:FireFox線性漸變

效果設置區

開始

%
%

結束

%
%

停靠

刪除停靠添加停靠

效果預覽區點擊復制代碼

代碼區

說明

Safari 4 Firefox 3.6 Opera Chrome Internet Explorer

  • webkit內核的Safari、 Chrome的Linear Gradients (線性漸變) 基本語法:background-image:-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值),to(結束顏色值), [color-stop(偏移量小數,停靠顏色值),...] );
  • -webkit-gradient是background的一個屬性值;
  • webkit內核的Linear Gradients (線性漸變) 第一組參數type(類型)為 linear;
  • 第二組參數是,x1 y1, x2 y2,當成顏色漸變體的兩個點的坐標就是。x1,x2,y1,y2的取值范圍為0%-100%,當x1,x2,y1,y2取值為極值的時候,x1和x2可以取值left(或0%)或right(或100%),,y1和y2可以取值top(或0%)或bottom(或100%);
    • 當x1等于x2,y1不等于y2,實現垂直漸變,調整y1,y2的值可以調整漸變半徑大小;
    • 當y1等于y2,x1不等于x2,實現水平漸變,調整x1,x2的值可以調整漸變半徑大小;
    • 當y1不等于y2,x1不等于x2,實現角度漸變,當x1,x2,y1,y2取值為極值的時候接近垂直漸變或水平漸變;
    • 當x1等于x2,y1等于y2,實現沒有漸變,取from色,即“ from(顏色值) ”;
  • 實現垂直漸變和水平漸變漸變時,x1和x2可以最簡單的取值是left(或0%)或right(或100%),y1和y2可以最簡單的取值是top(或0%)或bottom(或100%);
  • from(開始顏色值),to(結束顏色值)是兩個漸變顏色值;
  • [color-stop(偏移量<小數>,停靠顏色值),...]:可以使用多個color-stop,如果漸變只有2個顏色,那么可以不使用該參數;偏移量必須為小數,如果偏移量>=1,那么該color-stop相當于無效;
腾讯彩票兑奖