|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
【10個(gè)示例】了解CSS linear-gradient()背景顏色漸變
作者:admin 時(shí)間:2022-3-30 10:49:16 瀏覽:在上一篇文章里，我們了解了CSS背景顏色漸變的一些知識(shí)，參考文章指南：
在本文，將用10個(gè)簡(jiǎn)單示例，介紹CSS linear-gradient()背景顏色漸變的使用方法。
css語(yǔ)法
background: linear-gradient(direction,color-stop1,color-stop2,...);
- direction：指定漸變的方向（或角度）；
- color-stop1,color-stop2,...：用于指定漸變的起止顏色（至少需要兩種顏色）
關(guān)于color-stop()的使用，可以參考簡(jiǎn)單實(shí)例解釋?zhuān)篵ackground:-webkit-gradient() color-stop() 。
linear-gradient()在各瀏覽器的寫(xiě)法有一點(diǎn)不同：
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* 標(biāo)準(zhǔn)語(yǔ)法 */
示例介紹
下面用10個(gè)示例，簡(jiǎn)單介紹這個(gè)屬性的用法。
1、background: linear-gradient(to left,#d3959b,#bfe6ba);
to left 設(shè)置漸變從右到左，相當(dāng)于270deg。
2、background: linear-gradient(to right,#d3959b,#bfe6ba);
to right設(shè)置漸變從左到右，相當(dāng)于90deg。
3、background: linear-gradient(to top,#d3959b,#bfe6ba);
to top 設(shè)置漸變從下到上，相當(dāng)于0deg。
4、background: linear-gradient(to bottom,#d3959b,#bfe6ba);
to bottom 設(shè)置漸變從上到下，相當(dāng)于180deg。
5、background: linear-gradient(to top right,#d3959b,#bfe6ba);
to right top = to top right ：從左下角到右上角，對(duì)角線(xiàn)角度。
6、background: linear-gradient(45deg,#d3959b,#bfe6ba);
和 to top right 有細(xì)微差別（背景為正方形的時(shí)候無(wú)差別） 。
7、background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);
用百分比指定起始顏色的位置，默認(rèn)值為0%。
8、background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);
從左到右漸變，相當(dāng)于90deg。
9、background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);
相當(dāng)于 to top right，從左下角到右上角對(duì)角線(xiàn)漸變。
10、background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
rgba使用了0.5的透明度。
總結(jié)
本文通過(guò)10個(gè)簡(jiǎn)單示例，介紹了CSS linear-gradient()背景顏色漸變的相關(guān)知識(shí)，通過(guò)本文的介紹，目的是能讓大家了解linear-gradient()的基本用法。
相關(guān)文章推薦
標(biāo)簽: linear-gradient 背景顏色漸變 color-stop
