CSS3渐变知识的介绍

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

可分为线性渐变、径向渐变

1    线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

                       

上图是从黄色渐变到绿色

1、必要的元素:

a、方向

b、起始颜色

c、终止色;

2、关于方向如下图

 

2    径向渐变

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

 

1、必要的元素:

a、辐射范围即圆半径

b、中心点 即圆的中心

c、渐变起始色

d、渐变终止色

2、关于中心点:中心位置参照的是盒子的左上角

3、关于辐射范围:其半径可以不等,即可以是椭圆

posted @ 2016-09-13 14:38  萧诺  阅读(298)  评论(0编辑  收藏  举报