一、渐变
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。
线性渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果,如下图是从黄色渐变到绿色。
1、必要的元素:
借助Photoshop总结得出线性渐变的必要元素
a、方向
b、起始色
c、终止色
d、渐变距离
2、关于方向
设置渐变方向,可以用关键字如to top、to right,也可以用角度(正负值均可)如45deg、-90deg等,当以角度做为参数时,可参照下图来使用,0deg从下往上,90deg从左向右,进而可以推算出180deg从上向下。
注:我们可以设置渐变的起始点,这个起始点的值可以是百分比形式,这个百分比在没有设置background-size时,是相对于盒子大小的,当设置了background-size时则是相对于background-size的。
径向渐变
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
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)的渐变。