第九讲_css渐变

文大奇Quiin

已于 2024-01-15 18:31:45 修改

阅读量459

点赞数 8

分类专栏： CSS样式文章标签： css 前端 css3

于 2024-01-12 12:36:23 首次发布

本文链接：https://blog.csdn.net/wenqi1992/article/details/135548117

版权

CSS样式专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3中的渐变功能，包括线性渐变的多种方向控制和环形渐变的中心点设定，以及颜色表示法的使用。提供实例代码并推荐了渐变色工具供读者参考。

摘要由CSDN通过智能技术生成

css渐变

1. 渐变的作用
2. 渐变的类型
- 2.1 线性渐变
- 2.2 环形渐变

1. 渐变的作用

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

2. 渐变的类型

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

2.1 线性渐变

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

<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>
  <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>