css的渐变设置

css的渐变设置

描述：

创建渐变效果，有径向和线性。

使用：

linear-gradient(direction, color-stop1, color-stop2, ...);

direction：方向，目的地。

（1）有to， to 后面跟目的地

举例：

    .testBox{

      width: 200px;

      height: 200px;

      border: solid 1px lightblue;

      background:

      // 1、to 后面跟目的地，表示从左到右，从黑到白。

      linear-gradient(to right, black, #fff);

    }

 

（2）没有to, 表示是出发地

 .testBox{

      width: 200px;

      height: 200px;

      border: solid 1px lightblue;

      background:

      // 2、没有to, 右边表示是出发地，从右到左，从黑到白

      linear-gradient(right, black, #fff);

    }

 

 

color-stop1, color-stop2：渐变的颜色。

注意:

浏览器兼容问题：

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}