渐变的定义
在两个或多个指定颜色之间显示平稳的过渡。
利用渐变可以制作出非常漂亮的颜色。
渐变的分类
css3里渐变分为线性渐变和径向渐变,本文介绍线性渐变
线性渐变的使用
- 用于制作丰富的过渡色背景如 容器背景色,取代图片来减少下载事件和宽带的使用。
- 三个维度:
- 方向orientation
- 颜色color
- 颜色位置点position
- 语法:
background-image:linear-gradient(orient,co1or1 position1,color2 position2 ...);
- 使用:
- 关键字指定:
to+1个方位词
:从左到右黄橙色渐变:linear-gradent:(to right,yellow,orange)
to+2个方位词
(对角线方向),到右下角黄橙色渐变:linear-gradient(to right bottom, yellow,orange)
- 角度指定:
角度+'deg',linear-gradient(90deg,yellow,orage)
- 位置点指定:
颜色+百分比:yellow 50%
如不指定,第一个颜色默认为0%,最后一个颜色默认为100%
- 关键字指定:
举例示范
- 一个普通例子:
background-image:linear-gradient(to right,orange,red)
- 两个颜色均分一个盒子,取消渐变效果:
background-image:linear-gradent(to right,orange 50%,red 50%)
- 三个颜色均分一个盒子,取消渐变效果
linear-gradient(135deg,orange 33%,red 33%,red 66%,yellow 66%,yellow 100%)
应用提醒
- 制作整页渐变背景:
- 主色:大范围使用的颜色。
- 邻近色:根据主色选择邻近色,提高过渡的平滑性,应该使用多个主色的临近渐变色。
- 颜色的位置点:可以调整背景的风格:严谨or活泼、令人窒息压抑呼吸自然…