background: linear-gradient(to bottom,skyblue,green);
从上向下渐变
background: linear-gradient(30deg,skyblue,green);
旋转30°的渐变(从12点方向开始)
background: linear-gradient(to bottom,skyblue 30%,green 80%);
控制渐变起始
background: linear-gradient(to bottom, #7d97ff 0% ,skyblue 25%,white 50%,#91a200 80%, green 95%);
多个渐变
radial-gradient(skyblue,black);
基本的放射性渐变,不一定是正圆,长短半径随div形状而变化
radial-gradient(circle,skyblue,black);
指定为正圆放射
radial-gradient(circle at top center , skyblue,black);
指定放射起点为正上方居中
background: radial-gradient(at bottom right , skyblue,black);
指定放射起点为右下角
从这里开始,后面再内容里写了相关代码的部分,不再专门用代码样式列出
(ellipse closest-side at 130px 50px , skyblue,black)从起点130px 50px放射到最近的边
(ellipse farthest-corner at 130px 50px , skyblue,black)从起点130px 50px放射到最远的角
(circle 95px at 130px 50px , skyblue,black)从起点130px 50px放射半径为95px的正圆
(ellipse 95px 235px at 50% 95% , skyblue,black)从起点50% 95%放射到水平半径为95px,竖直半径为235px的椭圆
以左下角开始彩虹色放射:background: radial-gradient(circle farthest-side at 0% 100%, blue 30%,purple 35%,cornflowerblue 40%,cyan 45%,lightgreen 50%,yellow 55%,orange 60%,red 65%,blue 70%,blue);