CSS3渐变
一、线性渐变
通过background-image: linear-gradient(...)设置线性渐变
语法： linear-gradient(direction,color1,color2, . . )
direction：渐变方向，默认从上到下，可选值：
简单选取：
① to right（从左到右）② to left（从右到左）
③ to top（从下到上） ④ to bottom（从上到下）
组合选取： to right bottom（左上角->右下角）等
角度选取：45deg（向45度方向渐变）等
案例：
① 设置一个从上到下的粉色向红色的渐变背景
background-image: linear-gradient(pink, rgba(255, 0, 0, 0.842));
② 设置一个从左上角到右下角的粉色到紫色的渐变背景
background-image: linear-gradient(to right bottom,pink, rgba(111, 0, 255, 0.842));
二、径向渐变
通过background-image: radial-gradient(...)设置径向渐变
语法： radial-gradient(shape, color1 , color2, . . . )
shape：代表从内向外渐变的形状，默认值为ellipse
可选值有：circle（圆形）、ellipse （椭圆）
案例：
设置一个圆形的径向渐变
background-image: radial-gradient(circle,white, rgb(223, 18, 162));
原文地址：https://blog.csdn.net/weixin_74261199/article/details/142669404
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！