第九讲_css渐变

css渐变

[1. 渐变的作用](#1. 渐变的作用)
[2. 渐变的类型](#2. 渐变的类型)
- [2.1 线性渐变](#2.1 线性渐变)
- [2.2 环形渐变](#2.2 环形渐变)

1. 渐变的作用

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

2. 渐变的类型

渐变（Gradients）分为线性渐变（Linear Gradients）和环形渐变（Radial Gradients）。

2.1 线性渐变

线性渐变（Linear Gradients）可以从上往下、从下往上、从左往右、从右往左、指定对角方向，进行渐变。

html 复制代码

<html>
  <style>
    div {
      margin-bottom: 10px;
      width: 200px;
      height: 200px;
    }
    .div1 {
      /* 默认是从上往下的渐变，可以指定n个颜色*/
      background-image: linear-gradient(red, green, blue, #fa7e23);
    }
    .div2 {
      /* 第一个参数：to top 指定从下往上渐变 */
      background-image: linear-gradient(to top, red, green, blue, #fa7e23);
    }
    .div3 {
      /* 第一个参数：to right 指定从左往右渐变 */
      background-image: linear-gradient(to right, red, green, blue, #fa7e23);
    }
    .div4 {
      /* 第一个参数：to left 指定从右往左渐变 */
      background-image: linear-gradient(to left, red, green, blue, #fa7e23);
    }
    .div5 {
      /* 旋转指定角度*/
      /* 指定 0deg 等价于从下往上 */
      /* 指定 90deg 等价于从左往右 */
      /* 指定 180deg 等价于从上往下 */
      /* 指定 270deg 等价于从右往左 */
      background-image: linear-gradient(270deg, red, green, blue, #fa7e23);
    }
    .div6 {
      /* 从上向下的渐变，指定从什么位置开始渐变*/
      /* 例如：0-50px都是红色，从50px开始渐变 */
      background-image: linear-gradient(red 50px, green 100px, blue, #fa7e23);
    }
  </style>

  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
</html>

2.2 环形渐变

环形渐变（Radial Gradients）由定义的中心点，以环状进行渐变。

html 复制代码

<html>
  <style>
    div {
      margin-bottom: 10px;
      width: 200px;
      height: 200px;
    }
    .div1 {
      /* 默认的中心点是盒子的中心 */
      background-image: radial-gradient(red, green, blue, #fa7e23);
    }
    .div2 {
      /* 指定中心的位置通过（top，bottom，right，left） */
      /* at right：表示中心点在右边线的中点 */
      /* at right top：表示中心点在右上顶角 */
      background-image: radial-gradient(
        at right,
        red,
        green,
        blue,
        #fa7e23
      );
    }
    .div3 {
      /* 指定中心的位置通过像素 */
      /* 参照点是左上顶角，左上顶角为0px 0px */
      background-image: radial-gradient(
        at 10px 10px,
        red,
        green,
        blue,
        #fa7e23
      );
    }
    .div4 {
      /* 设置渐变的环形为正圆*/
      background-image: radial-gradient(
        circle,
        red,
        green,
        blue,
        #fa7e23
      );
    }
    .div5 {
      /* 设置渐变的环形半径，x和y，如果x=y就是正圆 */
      background-image: radial-gradient(
        50px 50px,
        red,
        green,
        blue,
        #fa7e23
      );
    }
    .div6 {
         /* 指定位置开始渐变 */
      background-image: radial-gradient(
        red 50px,
        green 100px,
        blue,
        #fa7e23
      );
    }
  </style>

  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
</html>

ps：渐变支持所有颜色表示法，不熟悉颜色表示的可以阅读这边博文，里面有详细的介绍：css颜色表示法

另外给大家推荐一个好用的渐变色工具，里面提供了很多漂亮的渐变配色：渐变色工具