模板:Linear-gradient/doc

此模板可以製造一個線性顏色漸變背景。 該模板目前兼容的瀏覽器有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>

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

技術說明

與模板{{gradient}}不同，此模板不分配默認背景顏色，因此不為不兼容漸變的瀏覽器提供自動備用。請始終在模板前指定背景顏色。這允許在不兼容的瀏覽器中更靈活的設計和後備處理。

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

例子

參見：Template:Linear-gradient/testcases

• <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。

參見

• {{radial-gradient}}
• {{border-radius}}
• {{box-shadow}}