渐变背景： linear-gradient
background: linear-gradient(颜色1, 颜色2); - - - 这种是从上到下，有颜色1过渡为颜色2；
background: linear-gradient(to right，颜色1, 颜色2); - - - 这种是从左到右，有颜色1过渡为颜色2；
预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
根据具体需求设置渐变方向。
如果设置的方向是 角度 deg, 角度值如下： 0deg - - - 从上到下， 90deg - - - 从左到右， 依次类推~
示例
① 有三个颜色渐变
background: linear-gradient(角度, 颜色1, 颜色2, 颜色3);
示例： background: linear-gradient(135deg,#9733FF,#526AFF,#11B9FF);
或者加上颜色变化的具体位置： background: linear-gradient(135deg, #9733FF 0%, #526AFF 42%, #11B9FF 100%);
展示效果如下：
② 有两个颜色渐变
background: linear-gradient(135deg,#9733FF,#11B9FF);
background: linear-gradient(135deg,#9733FF 0%,#11B9FF 100%);
展示效果如下：
渐变背景设置透明度
颜色值使用 rgba 格式，加上想要设置的透明度 ：rgba(…, 透明度)，
透明度值 0~1 之间，0指完全透明，1指完全不透明，
例如： background: linear-gradient(135deg, rgba(151, 51, 255, 0.1) 0%, rgba(82, 106, 255, 0.1) 42%, rgba(17, 185, 255, 0.1) 100%);
展示效果如下：
好文阅读
您阅读本篇文章共花了： 大家都在找：
css：css油橄榄
前端：前端和后端的区别
发表评论