css3 渐变

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

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

1.语法：

2.参数说明：

1. 第一个参数表示线性渐变的方向，

• to left：设置渐变为从右到左。相当于: 270deg;
• to right：设置渐变从左到右。相当于: 90deg;
• to top：设置渐变从下到上。相当于: 0deg;
• to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg
  

2. 第二个参数是起点颜色,可以指定颜色的位置
3. 第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变

3.示例：

.item {
      width: 200px;
      height: 60px;
      margin:40px;
      background: linear-gradient(to right, red, green);
    }

2. 还可以设置颜色的位置
   

.item {
      width: 200px;
      height: 60px;
      margin: 40px;
      background: linear-gradient(to right, red 0%, red 50%, green 50%, green 100%);
    }

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

1.语法：

2.参数说明：

• 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
• shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
• size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner
• color：指定颜色。Rgba hsla

示例：

1. 设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色
   

.item {
      width: 300px;
      height: 300px;
      margin: 40px;
      background: radial-gradient(at center, red, green);
    }

2. 设置径向渐变效果:从指定坐标开始，从一种颜色到另外一种颜色
   

.item {
      width: 300px;
      height: 300px;
      margin: 40px;
      background: radial-gradient(at 50px 50px,red,green);
    }

3. 设置径向渐变效果:从指定坐标开始，从一种颜色到另外一种颜色，同时指定颜色的位置
   

.item {
      width: 300px;
      height: 300px;
      margin: 40px;
      background: radial-gradient(at 50px 50px,red 0%,red 50%,green 50%,green 100%);
    }

4. 指定渐变的形状：ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样

.item {
      width: 300px;
      height: 300px;
      margin: 40px;
      background: radial-gradient(ellipse at center,red,green);
    }

5. 指定渐变的size
   

.item {
      width: 300px;
      height: 300px;
      margin: 40px;
      /*设置径向渐变效果:从中心点开始，从一种颜色到另外一种颜色,同时指定了大小为渐变到最近的边*/
      background: radial-gradient(circle closest-side at center,red,green,blue);
    }

6. 使用系统提供的位置设置
   

.item {
      width: 300px;
      height: 300px;
      margin: 40px;
      /*设置径向渐变效果:从右上角点开始，从一种颜色到另外一种颜色*/
      background: radial-gradient(circle at top right,red,green,blue)
    }

重复渐变：

1. 重复线性渐变
   

.item {
      width: 300px;
      height: 300px;
      margin: 40px;
      background: repeating-linear-gradient(45deg, #fff 0%, #fff 10%, #000 10%, #000 20%);
    }

2. 重复径向渐变
   

.item {
      width: 300px;
      height: 300px;
      margin: 40px;
      background: repeating-radial-gradient(circle farthest-corner at center, #fff 0%, #fff 10%, #000 10% ,#000 20%);
    }

前端进阶精选：点此去