App下載

webkit內(nèi)核safari/Chrome的Linear Gradients(線性漸變)在線調(diào)試工具

　這是一款可在線調(diào)試并預(yù)覽webkit內(nèi)核safari/Chrome的Linear Gradients(線性漸變)效果的工具。右側(cè)具有實(shí)時(shí)調(diào)試并顯示預(yù)覽效果的功能，同時(shí)能夠?qū)崟r(shí)生成對(duì)應(yīng)的效果代碼，代碼下方還針對(duì)線性漸變的原理與用 法進(jìn)行了詳盡的解釋說(shuō)明，方便需要的朋友使用。


效果設(shè)置區(qū)

開(kāi)始

%
%

結(jié)束

%
%

?？?/h3>

刪除?？?/span>添加?？?/span>

效果預(yù)覽區(qū)

代碼區(qū)

說(shuō)明

Safari 4 Firefox 3.6 Opera Chrome Internet Explorer

  • webkit內(nèi)核的safari、 Chrome的Linear Gradients (線性漸變) 基本語(yǔ)法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(開(kāi)始顏色值),to(結(jié)束顏色值), [color-stop(偏移量小數(shù),?？款伾?,...] );
  • -webkit-gradient是background的一個(gè)屬性值；
  • webkit內(nèi)核的Linear Gradients (線性漸變) 第一組參數(shù)type（類(lèi)型）為 linear；
  • 第二組參數(shù)是,x1 y1, x2 y2,當(dāng)成顏色漸變體的兩個(gè)點(diǎn)的坐標(biāo)就是。x1,x2,y1,y2的取值范圍為0%-100%，當(dāng)x1,x2,y1,y2取值為極值的時(shí)候，x1和x2可 以取值left（或0%）或right（或100%），,y1和y2可以取值top（或0%）或bottom（或100%）；
    • 當(dāng)x1等于x2，y1不等于y2，實(shí)現(xiàn)垂直漸變，調(diào)整y1，y2的值可以調(diào)整漸變半徑大小；
    • 當(dāng)y1等于y2，x1不等于x2，實(shí)現(xiàn)水平漸變，調(diào)整x1，x2的值可以調(diào)整漸變半徑大??；
    • 當(dāng)y1不等于y2，x1不等于x2，實(shí)現(xiàn)角度漸變，當(dāng)x1,x2,y1,y2取值為極值的時(shí)候接近垂直漸變或水平漸變；
    • 當(dāng)x1等于x2，y1等于y2，實(shí)現(xiàn)沒(méi)有漸變，取from色，即“ from(顏色值) ”；
  • 實(shí)現(xiàn)垂直漸變和水平漸變漸變時(shí)，x1和x2可以最簡(jiǎn)單的取值是left（或0%）或right（或100%）,y1和y2可以最簡(jiǎn)單的取值是top（或0%）或bottom（或100%）；
  • from(開(kāi)始顏色值),to(結(jié)束顏色值)是兩個(gè)漸變顏色值；
  • [color-stop(偏移量<小數(shù)>,?？款伾?,...]：可以使用多個(gè)color-stop，如果漸變只有2個(gè)顏色，那么可以不使用該參數(shù)；偏移量必須為小數(shù)，如果偏移量>=1,那么該color-stop相當(dāng)于無(wú)效；
  • firefox下的Linear Gradients (線性漸變) 請(qǐng)參閱：
  • ie下可以使用漸變?yōu)V鏡，請(qǐng)參閱： http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx