css3增加了渐变属性

CSS3的推出，为前端开发提供了更多的能力。其中，CSS3增加了许多新的属性并且提高了现有属性的能力。其中一个令人激动的变化是新增的渐变属性。

/* 线性渐变 */
background: linear-gradient(red,yellow);
/* 放射性渐变 */
background: radial-gradient(red,yellow);
/* 角渐变 */
background: repeating-linear-gradient(45deg,yellow,green 10%,blue 20%);
/* 圆角渐变 */
background: conic-gradient(from 0 at 50% 150%,to 360deg at 50% 0,green,blue);
/* 不规则渐变 */
background: -webkit-gradient(radial,center center,460,color-stop(0%,rgba(255,255,0)),color-stop(50%,color-stop(51%,rgba(0,.3))),url('./img/bg.png') no-repeat center center / cover;

以上是一些渐变属性的示例代码。其中，线性渐变可以使渐变从上至下、从左至右或倾斜。放射性渐变可以让渐变从一个点向外扩散。角渐变可以将渐变沿着角度旋转。圆角渐变可以在有圆角的形状上产生一个渐变。不规则渐变则可以创建更细致、独特的外观。

让我们来看看一个简单的例子

/* 定义 */
background: linear-gradient(45deg,red,blue);
/* 使用 */
background-size: 400% 400%;
animation: gradient 10s ease infinite;

/* 动画 */
@keyframes gradient {
  0% {
    background-position: 0 50%;    
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

这个例子中，我们创建了一个线性渐变，并在元素的背景大小上定义了400%。接着，我们定义了一个渐变动画，用了10秒做一个无限循环。这个动画通过改变background-position属性来实现。我们可以看到，渐变在元素的背景中平移，创建了一个动态的效果。