css3渐变的使用（一）：渐变基础与线性渐变

渐变的定义

在两个或多个指定颜色之间显示平稳的过渡。
利用渐变可以制作出非常漂亮的颜色。

渐变的分类

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活泼、令人窒息压抑呼吸自然…