CSS3 渐变（Gradients）

渐变

 

渐变色彩在前端开发中经常使用，渐变有从内至外、从外至内、从左至右、对角等方式进行

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变相关属性：background-image。

（1）从上至下

.bg {
    background-image: linear-gradient(#e66465, #9198e5);
}

 

（2）从左至右

.bg {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

 

  (3)对角(左上角->右下角)

.bg {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

径向渐变有时候也需要其中渐变程度的体现

 

 // 径向渐变
.bg{
  background: -webkit-gradient(radial,800 450,0,800 450,800,from(#0671E2),to(#0B1634));
}

 

也有较为简洁的方向指定渐变

.bg{
  background:-webkit-linear-gradient(right,#2375B7,#0B4484);
}