渐变

﹏ヽ暗。殇╰゛Y 2022-05-26 13:22 185阅读 0赞

## 一、渐变    ##

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

![70][]

#### 线性渐变    ####

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。

**1、必要的元素：**

借助Photoshop总结得出线性渐变的必要元素

a、方向

b、起始色

c、终止色

d、渐变距离

**2、关于方向**

设置渐变方向，可以用关键字如to top、to right，也可以用角度（正负值均可）如45deg、-90deg等，当以角度做为参数时，可参照下图来使用，0deg从下往上，90deg从左向右，进而可以推算出180deg从上向下。

![70 1][]

注：我们可以设置渐变的起始点，这个起始点的值可以是百分比形式，这个百分比在没有设置background-size时，是相对于盒子大小的，当设置了background-size时则是相对于background-size的。

#### 径向渐变    ####

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

![70 2][]

**1、必要的元素：**

a) 辐射范围即圆半径

b) 中心点 即圆的中心

c) 渐变起始色

d) 渐变终止色

e) 渐变范围

**2、关于中心点**

中心位置参照的是盒子的左上角，例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角，background-image:radial-gradient(120px at 0 100% yellow green)其圆心为左下角。

**3、关于辐射范围**

其半径可以不等，即可以是椭圆，如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形（横轴120px、纵轴100px）的渐变。

[70]: /images/20220526/2009eafa3b214f42a5c58b218db0c007.png
[70 1]: /images/20220526/91a4ca7b5e5745ed920b6a9d91ee4388.png
[70 2]: /images/20220526/622c8a3bf6804466a94215e5af06e278.png