前端css中径向渐变(radial-gradient)的使用

news2024/11/16 1:35:45

前端css中径向渐变的使用

  • 一、前言
  • 二、主要内容说明
    • （一）、径向渐变的形状
      • 1.椭圆形渐变（ellipse），源码1
      • 2.源码1运行效果
      • 3.圆形渐变（circle），源码2
      • 4.源码2运行效果
    • （二）、径向渐变的大小
      • 1.具体长度值渐变尺寸大小，源码3-1
      • 2.源码3-1运行效果如下：
      • 3.关键字渐变尺寸大小，源码3-2
      • 4.源码3-2的运行效果
    • （三）、径向渐变的中心位置
      • 1.关键词定渐变中心
      • 2.具体双值设置渐变中心，源码4
      • 3.源码4运行效果
    • （五）、径向渐变的颜色断点
      • 1.多颜色断点，源码5
      • 2.源码5运行效果
  • 三、结语
  • 四、定位日期

一、前言

radial-gradient径向渐变可以在网页的元素上创建一个从中心点往外的圆形或椭圆形的颜色渐变。常配合背景图片background-image进行使用。基本上能添加背景图片效果的元素组件，如按钮、标签、模型背景、文字等都可以添加径向渐变的效果。
径向渐变可以理解为给背景添加图片的效果，图片不能够直接使用动画效果animation进行动画效果过渡转变的。

二、主要内容说明

常用语法：
background-image: radial-gradient(A B at C, D1, D2,D3,...);
也可以简单缩写背景图片background-image为background，即
background: radial-gradient(A B at C, D1, D2,D3,...);，两效果相同。

  • A ------ 渐变的形状，可选值为circle(圆形)和ellipse(椭圆)，不选默认情况下为ellipse(椭圆)。

  • B ------ 渐变的大小。可以设置具体长度值，如像素px和相对长度的em。也可以使用关键字，如：
    closest-side: 渐变的尺寸扩展至最近边界。
    farthest-side: 渐变的尺寸扩展至最远边界。
    closest-corner: 渐变的尺寸扩展至最近角。
    farthest-corner: 渐变的尺寸扩展至最远角（默认值）。

  • C ------ 渐变的中心位置，可以使用关键词，如居中(center)、上(top)、下(bottom)、左(left)、右(right)，默认情况下为居中center。也可以用两两双值的形式，可以是百分数或长度，来具体表示位置值，如“50% 50%”、“100px 100px”。双值第一个值为纵坐标标，从上到下为正；第二个值为横坐标，从左到右为正。比如一个窗体的渐变中心位置值为“100px 200px”时表示，窗体上边框往下100像素，窗体左边框往右200像素为渐变的中心。

  • D ------ 渐变的颜色断点，至少两种颜色才有效果。各颜色值间用逗号(“,”)隔开。颜色可以指定位置，用百分比或长度设置，表示颜色变化的具体位置，如“red 50%,green 75%”。

（一）、径向渐变的形状

radial-gradient径向渐变的形状可选圆(circle)或椭圆(ellipse)，不指定默认情况下为ellipse椭圆。

1.椭圆形渐变（ellipse），源码1

简单简单创建个盒子，宽300px，高200px，使用天蓝色和绿色设置一个颜色渐变的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 设置视窗宽度等于设备宽度，缩放比例为1，以确保页面在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>径向渐变</title>
    <style>
        .box-max {
            width: 300px;  /* 设置 div 的宽度为 300 像素 */
            height: 200px; /* 设置 div 的高度为 200 像素 */
            /* 设置背景为一个径向渐变，从中心的水绿色逐渐过渡到边缘的绿色 */
            background-image: radial-gradient(ellipse, aqua 50%, green);
        }
    </style>
</head>
<body>
    <!-- div 元素用于显示径向渐变背景 -->
    <div class="box-max"></div>
</body>
</html>

2.源码1运行效果

在这里插入图片描述

3.圆形渐变（circle），源码2

源码1的基础上，把
ackground-image: radial-gradient(ellipse, aqua 50%, green);
的椭圆ellipse改为圆circle。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 设置视窗宽度等于设备宽度，缩放比例为1，以确保页面在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>径向渐变</title>
    <style>
        .box-max {
            width: 300px;  /* 设置 div 的宽度为 300 像素 */
            height: 200px; /* 设置 div 的高度为 200 像素 */
            /* 设置背景为一个圆径向渐变，从中心的水绿色逐渐过渡到边缘的绿色 */
            background-image: radial-gradient(circle, aqua 50%, green);
        }
    </style>
</head>
<body>
    <!-- div 元素用于显示径向渐变背景 -->
    <div class="box-max"></div>
</body>
</html>

4.源码2运行效果

在这里插入图片描述

（二）、径向渐变的大小

radial-gradient径向渐变的大小也可以说是元素中渐变的范围。可设置具体数值或百分数，也可以使用关键字，如：
closest-side: 渐变的尺寸扩展至最近边界。
farthest-side: 渐变的尺寸扩展至最远边界。
closest-corner: 渐变的尺寸扩展至最近角。
farthest-corner: 渐变的尺寸扩展至最远角（默认值）。
理解渐变的大小范围，可以先看固定尺寸下的大小范围，然后再来理解关键字的大小范围。若要设置具体数值，在圆的情况下单值为圆的半径，也可以设置双值来设置椭圆半径。先后边看源码3-1的运行效果图，一个天蓝色中心，外围环绕着一层渐变的光晕，光晕边范围以内就是渐变的大小。再来观察farthest-corner尺寸扩展至最远的角的默认范围效果图，如下图。默认情况是蓝色椭圆心，绿色外围的渐变的长方形。中心到四角的距离相同，渐变的范围是中心到4角的距离范围。其他关键字也以此类推便可，如果是到最近的边closest-side范围，看后面的源码3-2运行效果图，那我们所看到的便是一个光晕边界非常接近长方形近边的渐变效果图。
设置天蓝色椭圆心和绿色外边的径向渐变，正方形的，

1.具体长度值渐变尺寸大小，源码3-1

设置一个宽300px，高200px的盒子模型，模型里的渐变大小为宽100px，高80px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box-max {
            width: 300px;  /* 设置 div 的宽度为 300 像素 */
            height: 200px; /* 设置 div 的高度为 200 像素 */
            /* 设置背景为一个椭圆径向渐变，椭圆的水平半径为 100px，垂直半径为 80px，
               从中心的水绿色逐渐过渡到边缘的绿色 */
            background-image: radial-gradient(ellipse 100px 80px, aqua, green);
        }
    </style>
</head>
<body>
    <!-- div 元素用于显示径向渐变背景 -->
    <div class="box-max"></div>
</body>
</html>

2.源码3-1运行效果如下：

在这里插入图片描述

3.关键字渐变尺寸大小，源码3-2

源码3-1的基础上，修改椭圆具体数值“100px 80px”为closest-side（渐变的尺寸扩展至最近边界）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box-max {
            width: 300px;  /* 设置 div 的宽度为 300 像素 */
            height: 200px; /* 设置 div 的高度为 200 像素 */
            /* 设置背景为一个椭圆形径向渐变，渐变尺寸扩展到最近边缘，
               从中心的水绿色逐渐过渡到边缘的绿色 */
            background-image: radial-gradient(ellipse closest-side, aqua, green);
        }
    </style>
</head>
<body>
    <!-- div 元素用于显示径向渐变背景，创建视觉聚焦效果 -->
    <div class="box-max"></div>
</body>
</html>

4.源码3-2的运行效果

在这里插入图片描述

（三）、径向渐变的中心位置

渐变的中心位置，可以使用关键词，如居中(center)、上(top)、下(bottom)、左(left)、右(right)，默认情况下为居中center。也可以用两两双值的形式，可以是百分数或长度，来具体表示位置值。

1.关键词定渐变中心

默认值为center居中，通过前面的源码效果不难看出。若选其他关键词，渐变中心也会根据设置进行改变。我们在源码3-2的基础上修改，当
background-image: radial-gradient(ellipse at top, aqua, green);

  • 渐变中心改为上top的效果如下：
    在这里插入图片描述

  • 渐变中心改为下bottom的效果如下：
    在这里插入图片描述

  • 渐变中心改为左left的效果如下：
    在这里插入图片描述

  • 渐变中心改为右right的效果如下：
    在这里插入图片描述

2.具体双值设置渐变中心，源码4

渐变中心可以设置双值来设置渐变中心，如“100px 200px”，也可以设置百分数设置渐变中心。当然也可以混搭。我们在源码3-2的基础上修改。设置一个横坐标30px，纵坐标取30%比例的渐变中心。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box-max {
            width: 300px;  /* 设置 div 的宽度为 300 像素 */
            height: 200px; /* 设置 div 的高度为 200 像素 */
            /* 设置背景为一个椭圆形径向渐变，渐变中心位于左边 30px 和顶部 30% 的位置，
               渐变范围扩展到最远的角落，从中心的水绿色逐渐过渡到边缘的绿色 */
            background-image: radial-gradient(ellipse farthest-corner at 30px 30%, aqua, green);
        }
    </style>
</head>
<body>
    <!-- div 元素用于显示径向渐变背景 -->
    <div class="box-max"></div>
</body>
</html>

3.源码4运行效果

在这里插入图片描述

（五）、径向渐变的颜色断点

渐变的颜色断点，至少两种颜色才有效果。各颜色值间用逗号(“,”)隔开。颜色可以指定位置，用百分比或长度设置，表示颜色变化的具体位置，如“red 50%,green 75%”。颜色断点设置的位置不会改变渐变的本身的大小，它只是改变颜色边距的位置。
比如设置两种颜色天蓝和绿色，长方形宽300px，高200px，里面渐变大小宽100px，高80px，未设置颜色位置默认如下图：
在这里插入图片描述
给天蓝色设置30%的位置，如下图：
在这里插入图片描述
给天蓝色设置50%的位置，如下图
在这里插入图片描述
通过上面3个图对比，颜色设置位置只是改变颜色具体可见的边界位置。

1.多颜色断点，源码5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .box-max {
            width: 300px;  /* 设置 div 的宽度为 300 像素 */
            height: 200px; /* 设置 div 的高度为 200 像素 */
            /* 设置背景为一个椭圆形径向渐变，渐变从水绿色开始，在 30% 的位置变为紫色，
               然后在 50% 的位置变为亮绿色，这个渐变覆盖到最近的边缘 */
            background-image: radial-gradient(ellipse closest-side, aqua 30%, rgb(109, 27, 145) 50%, rgb(76, 214, 30));
        }
    </style>
</head>
<body>
    <!-- div 元素用于显示径向渐变背景 -->
    <div class="box-max"></div>
</body>
</html>

2.源码5运行效果

在这里插入图片描述

三、结语

本文只是简单说一下渐变的各种语法属性。没有专门对元素组件如按钮、标签、窗体背景、文本等举例使用。渐变不仅仅可以设置成圆的效果渐变，也可以调整其他方向进行设定方向的渐变。
具体对某元素组件的渐变使用，笔者会另起博文记录。
原本想尝试使用动画效果对渐变进行举例，后来发现渐变属于类似于图片一类，没法实现渐变颜色的过渡动画效果。虽然没法使用animation，但也会有其他方法，如可以结合使用用伪元素一类的方法来实现类似功能，后面再慢慢探索了。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

四、定位日期

2024.5.8；
15；50

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1656587.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【强训笔记】day14

【强训笔记】day14

NO.1 思路&#xff1a;用一个哈希表&#xff0c;先遍历s1&#xff0c;统计哈希表内的字符个数&#xff0c;在遍历s2&#xff0c;s2中的字符在哈希表中减去&#xff0c;如果哈希表中的字符个数小于0那么就输出No。 代码实现&#xff1a; #include <iostream> #include&…
阅读更多...
使用网络工具监控网络性能

使用网络工具监控网络性能

网络工具和实用程序有助于有效地检测网络问题&#xff0c;诊断其原因和位置&#xff0c;以及缓解和解决问题&#xff0c;这有助于确保网络环境的稳定性&#xff0c;使用户免受设备连接问题带来的麻烦。 网络工具已经成为每个网络管理员用于有效诊断和处理网络问题的解决方案中…
阅读更多...
5 Spring 事务管理

5 Spring 事务管理

目录 1.概述 2.事务特性&#xff1a;ACID 3.Spring 框架的事务管理支持两种方式 编程式事务 申明式事务 4.Spring 事务管理 API 事务管理器接口 Spring 的回滚方式 事务定义接口 事务的四种隔离级别 事务的七种传播行为 5.事务注解例子&#xff1a; Transactianal…
阅读更多...
【Java orm 框架比较】十 新增hammer_sql_db 框架对比

【Java orm 框架比较】十 新增hammer_sql_db 框架对比

迁移到&#xff08;https://gitee.com/wujiawei1207537021/spring-orm-integration-compare&#xff09; orm框架使用性能比较 比较mybatis-plus、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp、jpa、dbvisitor、beetlsql、dream_orm、wood、hammer_sql_db 操作数据 …
阅读更多...
关于GitHub仓库建立及提交问题

关于GitHub仓库建立及提交问题

文章目录 前言GitHub仓库创建token令牌的获取GitHub克隆到本地GitHub上传文件 前言 为了整一个GitHub仓库然后上传文件&#xff0c;笔者看了不下100篇博客&#xff0c;20段教程&#xff0c;最后在两位大佬的帮助下&#xff0c;才整明白了&#x1f62d; 先提前说一嘴从 2021年8月…
阅读更多...
Linux-02

Linux-02

Linux常用命令&#xff1a; ls: 列出目录touch: 创建文件 touch test.txt echo:往文件写内容echo "i love linux" >>test.txtcd&#xff1a;切换目录pwd&#xff1a;显示目前的目录mkdir&#xff1a;创建一个新的目录 mkdir dai:创建目录dai mkdir -p test1/t…
阅读更多...
组件目录存放问题

组件目录存放问题

目录 一、思考引入 二、组件分类 三、组件分类的目的 一、思考引入 .vue文件本质无区别&#xff0c;而路由相关的组件&#xff0c;为什么要放在views目录呢&#xff1f; 二、组件分类 .vue文件分2类&#xff1a;页面组件和复用组件。注意&#xff1a;都是.vue文件&#xff…
阅读更多...
C++进阶之路：何为命名空间、缺省参数与函数重载

C++进阶之路：何为命名空间、缺省参数与函数重载

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…
阅读更多...
制造业的智慧进化：机器学习与人工智能的全方位渗透

制造业的智慧进化：机器学习与人工智能的全方位渗透

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…
阅读更多...
OpenBayes 在线教程｜自拍图片秒变个人写真！小红书团队「InstantID」效果炸裂！GitHub收藏量达9.9K

OpenBayes 在线教程｜自拍图片秒变个人写真！小红书团队「InstantID」效果炸裂！GitHub收藏量达9.9K

小红书一群脑洞大开 95 后工程师开源的「InstantID」项目&#xff0c;一经发布就让整个科技界炸了锅&#xff0c;GitHub 收藏量更是达到了 9.9K&#xff01; 从炫酷的赛博朋克到端庄的油画风格&#xff0c;再到立体感十足的 3D 雕像......只需输入一张自拍&#xff0c;InstantI…
阅读更多...
springboot和html学院教务管理系统

springboot和html学院教务管理系统

端口号根据你实际运行程序的端口号来 访问地址&#xff1a;localhost:8080 学生 : student1 123456 管理员&#xff1a;admin 123456 老师&#xff1a;2020001 123456 sys_user 表是账号和密码
阅读更多...
基于springboot+vue+Mysql的自习室预订系统

基于springboot+vue+Mysql的自习室预订系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…
阅读更多...
Linux——socket编程之tcp通信

Linux——socket编程之tcp通信

前言 前面我们学习socket的udp通信&#xff0c;了解到了socket的概念与udp的实现方法&#xff0c;今天我们来学习一下面向连接的tcp通信。 一、tcp套接字创建 UDP和TCP都是通过套接字&#xff08;socket&#xff09;来实现通信的&#xff0c;因此TCP也得使用socket()接口创建…
阅读更多...
信息技术自主可控的意义，针对国产化替换，服务器虚拟化或比公有云更具优势

信息技术自主可控的意义，针对国产化替换，服务器虚拟化或比公有云更具优势

我们之前在文章《博通收购VMware后&#xff0c;经销商和用户如何应对&#xff1f;新出路&#xff1a;虚拟化国产替代&#xff0c;融入信创云生态》中提到&#xff1a; 从信创整体发展和政策标准来看&#xff0c;供应商必须满足两个条件&#xff1a;一是融入国产信息技术生态&am…
阅读更多...
DuDuTalk：4G桌面拾音设备在银行网点服务场景的应用价值

DuDuTalk：4G桌面拾音设备在银行网点服务场景的应用价值

随着科技的飞速发展&#xff0c;银行业也在不断地寻求创新以提高服务质量和效率。在这个过程中&#xff0c;4G桌面拾音设备作为一种新型的智能设备&#xff0c;其在银行网点服务场景中的应用价值逐渐凸显出来。本文将从多个角度探讨4G桌面拾音设备在银行网点服务场景的应用价值…
阅读更多...
如何更快地执行 Selenium 测试用例？

如何更快地执行 Selenium 测试用例？

前言&#xff1a; 当我们谈论自动化时&#xff0c;首先想到的工具之一是 Selenium。我们都知道Selenium WebDriver 是一个出色的 Web 自动化工具。实施Selenium 自动化测试的主要原因是加速 selenium 测试。在大多数情况下&#xff0c;Selenium 的性能比手动的要好得多。但是&…
阅读更多...
vue3+ts之el-tooltip换行显示内容

vue3+ts之el-tooltip换行显示内容

<el-tooltip placement"top-end"><div slot"content" class"tips"><el-button type"primary" click"exportData">导出</el-button></div><template #content><span class"cont…
阅读更多...
出差——蓝桥杯十三届2022国赛大学B组真题

出差——蓝桥杯十三届2022国赛大学B组真题

问题分析 该题属于枚举类型&#xff0c;遍历所有情况选出符合条件的即可。因为只需要派两个人&#xff0c;因此采用两层循环遍历每一种情况。 AC_Code #include <bits/stdc.h> using namespace std; string str;//选择的两人 bool ok(){if(str.find("A")!-1…
阅读更多...
关于如何取消数据请求的操作

关于如何取消数据请求的操作

直接上码&#xff1a; class RequestManager {constructor() {this.requestQueue []}addRequestQueue(axios) {// 创建取消令牌const cancelToken axios.CancelToken.source()this.requestQueue.push(cancelToken.cancel)return cancelToken.token}clearRequestQueue() {thi…
阅读更多...
【Android】Kotlin学习之数据容器(数组for循环遍历)

【Android】Kotlin学习之数据容器(数组for循环遍历)

数组遍历 1. for ( item in arr){…} 2. for ( i in arr.indeces ) {…} (遍历下标) 3. for ((index, item) in arr.withInfex()) {…} (遍历下标和元素) 4. arr.forEach {} ( 遍历元素 ) 5. arr.forEachIndexed{index, item -> …}
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023