模板:Linear-gradient/doc

此頁面是Template:Linear-gradient的模板文件。
此頁面可能包含了模板的使用說明、分類和其他內容。

此模板文件被引用於許多頁面。
為了避免造成大規模的影響，所有對此模板文件的編輯應先於沙盒、測試樣例或您的沙盒上測試。
測試後無誤的版本可以一次性地加入此模板文件中，但是修改前請務必於討論頁發起討論。

模板引用數量會自動更新。

此模板可以製造一個線性顏色漸變背景。該模板目前兼容的瀏覽器有Firefox（版本3.6以上），Opera（版本11.10以上），Safari（版本5.1以上），Google Chrome（版本10以上）和Internet Explorer（版本10以上）。

用法

CSS樣式標記中使用。該模板使用background-image屬性。

<div style="{{linear-gradient | start position | #color [stop], #color [stop][, #color [stop], ...] }}">Lorem ipsum...</div>

start position –必填項。制定顏色漸變起點，參數有：left，top，right和bottom，或兩者的組合，比如top left（左上）。這樣便可以填寫八種參數。
color – 必填項。至少要填兩種顏色的參數，您可以自定義任意數量的其他顏色，用逗號分隔。
stop – 可選的。您可以使用百分比（例如45％）或像素（例如60px）為漸變指定停止點。

技術說明

與模板{{gradient}}不同，此模板不設默認背景色，因此不會為不兼容漸層色的瀏覽器提供後備方案。若要確保為不兼容的瀏覽器提供後備妨礙，請始終在本模板代碼之前指定背景顏色。

此模板對顏色的線性漸變使用新的CSS3屬性：-moz-linear-gradient、-o-linear-gradient、-webkit-linear-gradient 和linear-gradient。由於其偏離屬性，該模板並不適用舊版的-webkit-gradient屬性。這意味著該模板在Safari瀏覽器5.1以下版本和Google Chrome 10以下版本無法正常使用。

例子

<div style="{{linear-gradient|left|#ffdddd, #ddddff}}">Lorem ipsum...</div>輸出為：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="{{linear-gradient|left|#ffdddd, #ddffdd 50%, #ddddff}}">Lorem ipsum...</div>輸出為：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="{{linear-gradient|top|#ffdddd, #ddddff}}">Lorem ipsum...</div>輸出為：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

注意事項

上面的例子使用對比色來更清楚地顯示效果。最好使用細微差別的顏色差異，而不是使用兩個不同的顏色。這也是最大限度地減少了與不支持漸變的瀏覽器之間的影響。

根據格式手冊，禁止在條目的表格中加入漸變色等花俏樣式，因此一般情況下請勿在條目中使用本模板。

兼容性

有關所有瀏覽器兼容性的詳細信息，請參閱Mozilla開發者網絡上的linear-gradient。

參見