App下載

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

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


效果設置區(qū)

基本效果

%
%
%

?？?/h3>
%

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

效果預覽區(qū)

代碼區(qū)

說明

Safari 4 Firefox 3.6 Opera Chrome Internet Explorer

  • Firefox的Linear Gradients (線性漸變) 基本語法：background-image:-moz-linear-gradient([<point> | | <angle>，] , 開始顏色值,結(jié)束顏色值, [(?？款伾?偏移量百分數(shù)),...] );
  • -moz-linear-gradient是background的一個屬性值；
  • 第一組參數(shù)<角度位置>為非常靈活，他的基本組成點位 <point> （ 漸變的出發(fā)點 ）和角度；
    • <point> 漸變的出發(fā)點: 它可以被指定為一個百分比，像素，或使用“l(fā)eft”，“center”或“right”的水平和“top”，“center”，或“buttom”的垂直定位。 位置從最受影響的元素左上角。
    • 如果只在水平漸變的話，只要設置：“l(fā)eft center”或“right center”，如果垂直漸變的話設置“center top”或者“center buttom”。Firefox下可以省略掉 “center”，也就是如果只在水平漸變的話，只要設置：“l(fā)eft”或“right”，如果垂直漸變的話設置“top”或者“buttom”。
    • 如果這兩個值是百分比的值的話，那么第一個是水平漸變位置，第一個是垂直漸變位置，這個時候還需要一個角度值，比如“90deg”；這個可以看本頁的例子；
    • 還可以是只有一個角度值。
  • (開始顏色值),(結(jié)束顏色值)是兩個漸變顏色值；
  • [(?？款伾?偏移量百分數(shù)),...]：可以使用多個color-stop，如果漸變只有2個顏色，那么可以不使用該參數(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