App下載

Firefox的Linear Gradients (線性漸變)在線調(diào)試工具

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


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

基本效果

%
%
%

?？?/h3>
%

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

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

代碼區(qū)

說明

Safari 4 Firefox 3.6 Opera Chrome Internet Explorer

  • Firefox的Linear Gradients (線性漸變) 基本語法：background-image:-moz-linear-gradient([<point> | | <angle>，] , 開始顏色值,結(jié)束顏色值, [(?？款伾?偏移量百分?jǐn)?shù)),...] );
  • -moz-linear-gradient是background的一個(gè)屬性值；
  • 第一組參數(shù)<角度位置>為非常靈活，他的基本組成點(diǎn)位 <point> （ 漸變的出發(fā)點(diǎn) ）和角度；
    • <point> 漸變的出發(fā)點(diǎn): 它可以被指定為一個(gè)百分比，像素，或使用“l(fā)eft”，“center”或“right”的水平和“top”，“center”，或“buttom”的垂直定位。 位置從最受影響的元素左上角。
    • 如果只在水平漸變的話，只要設(shè)置：“l(fā)eft center”或“right center”，如果垂直漸變的話設(shè)置“center top”或者“center buttom”。Firefox下可以省略掉 “center”，也就是如果只在水平漸變的話，只要設(shè)置：“l(fā)eft”或“right”，如果垂直漸變的話設(shè)置“top”或者“buttom”。
    • 如果這兩個(gè)值是百分比的值的話，那么第一個(gè)是水平漸變位置，第一個(gè)是垂直漸變位置，這個(gè)時(shí)候還需要一個(gè)角度值，比如“90deg”；這個(gè)可以看本頁的例子；
    • 還可以是只有一個(gè)角度值。
  • (開始顏色值),(結(jié)束顏色值)是兩個(gè)漸變顏色值；
  • [(?？款伾?偏移量百分?jǐn)?shù)),...]：可以使用多個(gè)color-stop，如果漸變只有2個(gè)顏色，那么可以不使用該參數(shù)；偏移量必須為0%~100%；
  • webkit內(nèi)核的safari、 Chrome下的Linear Gradients (線性漸變)
  • ie下可以使用漸變?yōu)V鏡，請參閱： http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx