为什么要使用渐变色

当今越来越注重 UI 交互的互联网时代，用户体验越来越被重视。

网页设计中，使用渐变得设计效果不仅仅可以达到醒目的效果，同时可以增强网页的质感。

如下图按钮的对比：

渐变背景实现

CSS3 中可以通过渐变（gradients 属性）实现两个或多个指定的颜色之间平滑过渡。

CSS3 以前，你需要通过配置一个渐变得背景图像来实现这些效果。

使用渐变效果的元素在放大时看起来效果不会有任何失真，因为渐变（gradient）是由浏览器生成的。

最重要的是，如果需要调整背景效果可以直接修改 CSS 样式，而不是更改图片那样麻烦。

gradients 属性

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

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

拓展属性：

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

gradients 语法

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

• direction/angle：选用，可以是关键词，也可以是角度
• color：支持快捷色（如：red）、16 进制色号、RGB 和 RGBA（透明色）

基本语法

/*默认自上向下的渐变*/
background-image: linear-gradient(red , yellow);
/*配置自左向右的渐变*/
background-image: linear-gradient(to right, red , yellow);
/*配置对角线渐变*/
background-image: linear-gradient(to bottom right, red, yellow,blue);
/*配置角度的渐变色*/
/*角度范围：-90到90*/
background-image: linear-gradient(45deg, red, yellow);
/*配置一个彩虹渐变*/
/*理论上来说可以支持无限个颜色*/
background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
/*透明渐变色，制作一个透明渐变遮罩*/
background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));
​

增强语法配置

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

/*通过调整%自由修改径向渐变得中心点位置*/
background-image: radial-gradient(closest-side at 50% 50%, red, yellow);
​

结语

灵活应用渐变色，可以让页面的元素更加灵动，但也要注意颜色的搭配。

过渡的渐变或不正确的颜色搭配，会使得页面变得“花里胡哨”“眼花缭乱”，反而落入了下层。