css渐变效果简易详解

渐变效果会提高页面的整体观感 页面基本上也都是要用到的
css能够实现的渐变有这两种

径向渐变

线性渐变

linear-gradient （线性渐变）

最简：（复制下面属性给盒子即可以复现效果）

  width: 300rpx;
  height: 100rpx;
  background-image: linear-gradient(to right , blue,yellow ,blue)

最简效果图：

延申一下 如果我需要下图这种效果怎么办呢

可以添加一个角度属性来控制**-45deg** 角度可以改变 尝试一下就可以了

  width: 300rpx;
  height: 100rpx;
  background-image: linear-gradient(-45deg, blue, yellow,blue);
  /* background-image: linear-gradient(to right , blue,yellow ,blue) */

接下来简单做一个所有属性总结
linear-gradient首先是关于颜色 里面可以写若干个颜色 可添加百分比属性 如果我想要从上向下怎么办呢？（方向属性）
方向属性放在第一位 方向属性有两种写法1.to+(方向) 例：to left 2.角度写法 例:-45deg
还有一个可丑的重复线性渐变
repeating-linear-gradient

radial-gradient （径向渐变）

最简:

 width: 300rpx;
  height: 100rpx;
  border-radius: 80%;
  background-image: radial-gradient(gray,#bfbfbf,white);

来源：CSDN

作者：weixin_46013844

链接：https://blog.csdn.net/weixin_46013844/article/details/104156748