[分享]css3提供的渐变样式有

CSS3 提供了许多新的样式特性，其中一项重要的特性是渐变样式。在以往的 CSS 版本中，我们需要使用背景图片才能实现渐变效果，但是 CSS3 中，我们可以使用简单的 CSS 属性来实现渐变，让我们来...

CSS3 提供了许多新的样式特性，其中一项重要的特性是渐变样式。在以往的 CSS 版本中，我们需要使用背景图片才能实现渐变效果，但是 CSS3 中，我们可以使用简单的 CSS 属性来实现渐变，让我们来看看如何实现。

.gradient {
  /* 线性渐变 */
  background: linear-gradient(to right, #f00, #00f); 

  /* 径向渐变 */
  background: radial-gradient(#f00, #00f); 
} 

线性渐变

线性渐变可以从一种颜色渐变到另一种颜色。我们可以在 CSS 属性中指定渐变的方向，可以是水平、垂直、对角线等方向。

/* 水平方向渐变 */
.gradient {
  background: linear-gradient(to right, #f00, #00f); 
}

/* 垂直方向渐变 */
.gradient {
  background: linear-gradient(to bottom, #f00, #00f); 
}

/* 对角线方向渐变 */
.gradient {
  background: linear-gradient(to bottom right, #f00, #00f); 
} 

我们可以使用逗号分隔多个颜色值，这样就可以实现更复杂的渐变效果。下面的代码实现了从红色到黄色再到绿色的渐变效果。

.gradient {
  background: linear-gradient(to right, #f00, yellow, #0f0); 
} 

径向渐变

径向渐变可以从中心点向外扩散，可以使用圆形、椭圆形等形状。我们可以在 CSS 属性中指定渐变的形状和方向。

/* 圆形渐变 */
.gradient {
  background: radial-gradient(circle, #f00, #00f); 
}

/* 椭圆形渐变 */
.gradient {
  background: radial-gradient(ellipse, #f00, #00f); 
}

/* 以角度指定渐变方向 */
.gradient {
  background: radial-gradient(at 45deg, #f00, #00f); 
} 

我们可以使用逗号分隔多个颜色值，这样就可以实现更复杂的渐变效果。下面的代码实现了从红色到黄色再到绿色的径向渐变效果。

.gradient {
  background: radial-gradient(circle, #f00, yellow, #0f0); 
}