Loading... ``` <style> div{ width: 50px; height: 50px; } /* 多种颜色 */ div:nth-child(1){ background:linear-gradient(to right, red , orange, yellow , green ,blue , purple) } div:nth-child(2){ background: radial-gradient(red , yellow , green); } div:nth-child(3){ background: radial-gradient(red 5%, yellow 15%, green 60%); } div:nth-child(4){ background: radial-gradient(circle , red , yellow ,green); } div:nth-child(5){ background: radial-gradient(closest-side at 60% 50% ,red , yellow , black); } div:nth-child(6){ background: radial-gradient(farthest-side at 60% 55% , red , yellow , black); } div:nth-child(7){ background: radial-gradient(red , yellow 10%, green 15%); } /* 角度问题 */ div:nth-child(8){ /* background: linear-gradient(#fff ,#333); */ /* background: linear-gradient(90deg, #fff ,#333); */ background: linear-gradient(45deg, #fff ,#f00 50%,#090); } /* 透明度 */ div:nth-child(9){ background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } /* 重复性渐变 */ div:nth-child(10){ background: linear-gradient(red , yellow 10% , green 20%); } </style> ``` 最后修改:2021 年 03 月 15 日 © 允许规范转载 打赏 赞赏作者 微信 赞 0 如果觉得我的文章对你有用,请随意赞赏