來源
css漸變
CSS 中設置的漸變是 gradient 數據類型，它是一種特別的image數據類型。使用background-image設置，可疊加設置多個；
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變 linear-gradient()
漸變的實現由兩部分組成：漸變線和色標。漸變線用來控制發生漸變的方向；色標包含一個顏色值和一個位置，用來控制漸變的顏色變化。瀏覽器從每個色標的顏色淡出到下一個，以創建平滑的漸變，通過確定多個色標可以制作多色漸變效果。 使用漸變色做背景已經很常見了：
background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
復制代碼方向（direction）
從上到下（默認情況下）
.foo { width: 100px; height: 100px; background: linear-gradient(green, yellow); } 復制代碼從左到右
從右到左同理。 兼容性原因，不同瀏覽器寫法不同：
.foo { background: linear-gradient(to right, green, yellow); /* 標准的語法 */ background: -webkit-linear-gradient(left, green, yellow); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, green, yellow); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, green, yellow); /* Firefox 3.6 - 15 */ } 復制代碼對角
.foo { background: linear-gradient(to bottom right, green, yellow); /* 標准的語法 */ background: -webkit-linear-gradient(left top, green, yellow); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, green, yellow); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, green, yellow); /* Firefox 3.6 - 15 */ }
作者：Simmzl
鏈接：https://juejin.im/post/5cb941caf265da03a743eed2
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。