第九讲_css渐变

发布时间:2024年01月15日

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>

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

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

文章来源:https://blog.csdn.net/wenqi1992/article/details/135548117
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。