原文鏈接:https://www.cnblogs.com/liangdecha/p/9797124.html
css語(yǔ)法:
background: linear-gradient(direction,color-stop1,color-stop2,...);
direction:用角度值指定漸變的方向(或角度);
color-stop1,color-stop2,...:用于指定漸變的起止顏色
ps:至少需要兩種顏色
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ǔ)法 */
兼容性
練習(xí):
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);
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);
9踏幻、background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);
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的透明度