第九讲_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颜色表示法

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

相关推荐
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk5 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务