CSS3背景样式实现颜色渐变(Gradients属性)

某些特定位置使用背景色渐变可以使得页面质感得到大幅度提升,使用CSS3渐变(gradients属性)指定两个或多个颜色之间平滑过渡,颜色渐变是由浏览器生成,因此不会出现失真的情况。

CSS3背景样式实现颜色渐变(Gradients属性)

所属分类: WEB
专题标签: CSS 背景 渐变

为什么要使用渐变色

当今越来越注重UI交互的互联网时代,用户体验越来越被重视。
网页设计中,使用渐变得设计效果不仅仅可以达到醒目的效果,同时可以增强网页的质感。
如下图按钮的对比:

渐变背景实现

CSS3中可以通过渐变(gradients属性)实现两个或多个指定的颜色之间平滑过渡。
CSS3以前,你需要通过配置一个渐变得背景图像来实现这些效果。
使用渐变效果的元素在放大时看起来效果不会有任何失真,因为渐变(gradient)是由浏览器生成的。
最重要的是,如果需要调整背景效果可以直接修改CSS样式,而不是更改图片那样麻烦。

gradients属性有两种主要的配置:

  • linear-gradient(线性渐变):向下/向上/向左/向右/对角方向(可以指定角度)
  • radial-gradient(径向渐变):由中心向周围

拓展属性:

  • repeating-linear-gradient:重复的线性渐变
  • repeating-radial-gradient:重复的径向渐变

gradients语法

  1. /*gradients可以配置在background-image也可以配置在background*/
  2. /*background: linear-gradient(direction, color1, color2, ...);*/
  3. /*一般推荐配置在background-image,当有多个样式重叠,默认覆盖background*/
  4. background-image: linear-gradient(direction/angle, color1, color2, ...);

direction/angle:选用,可以是关键词,也可以是角度
color:支持快捷色(如:red)、16进制色号、RGB和RGBA(透明色)

基本语法

  1. /*默认自上向下的渐变*/
  2. background-image: linear-gradient(red , yellow);
  3. /*配置自左向右的渐变*/
  4. background-image: linear-gradient(to right, red , yellow);
  5. /*配置对角线渐变*/
  6. background-image: linear-gradient(to bottom right, red, yellow,blue);
  7. /*配置角度的渐变色*/
  8. /*角度范围:-90到90*/
  9. background-image: linear-gradient(45deg, red, yellow);
  10. /*配置一个彩虹渐变*/
  11. /*理论上来说可以支持无限个颜色*/
  12. background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
  13. /*透明渐变色,制作一个透明渐变遮罩*/
  14. background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));

增强语法配置

  1. /*控制颜色显示的范围*/
  2. /*这里颜色的百分比之和不规定是100%*/
  3. background-image: linear-gradient(red 5%, yellow 5%, green 20%,blue 70%);
  4. /*如果颜色范围超出100%,表示颜色产生重叠,重叠部分可能会失去渐变过渡*/
  5. /*直接是两种颜色分割的效果,类似:斑马线*/
  6. background-image: linear-gradient(red 15%, yellow 15%, green 30%,blue 90%);
  7. /*可以只配置某些具体的颜色范围*/
  8. background-image: linear-gradient(red , yellow 15%, green 20%,blue);

radial-gradient特定语法

linear-gradient的所有语法都适用于radial-gradient。
但radial-gradient有一个特定的语法用于定义中心点的位置。

  • cover:覆盖
  • contain:包含
  • closest-side:最近端
  • farthest-side:最远的端
  • closest-corner:最近的角
  • farthest-corner:最远的角落
  1. /*通过调整%自由修改径向渐变得中心点位置*/
  2. background-image: radial-gradient(closest-side at 50% 50%, red, yellow);