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

前端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.rhkb.cn/news/323645.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Windows安装RabbitMQ教程(附安装包)

Windows安装RabbitMQ教程(附安装包)

需要两个安装包 Erlang 安装包: https://download.csdn.net/download/Brevity6/89274663 (自己从官网下载也可以) RabbitMQ Windows 安装包&#xff1a; https://download.csdn.net/download/Brevity6/89274667 (自己从官网下载也可以) Erlang安装 Erlang安装傻瓜式下一…
阅读更多...
数据结构05：树与二叉树 习题01[C++]

数据结构05：树与二叉树 习题01[C++]

考研笔记整理&#xff0c;本篇作为树与二叉树的基本概念习题&#xff0c;供小伙伴们参考~&#x1f95d;&#x1f95d; 之前的博文链接在此&#xff1a;数据结构05&#xff1a;树与二叉树[C]-CSDN博客~&#x1f95d;&#x1f95d; 第1版&#xff1a;王道书的课后习题~&#x1…
阅读更多...
DenseCLIP论文讲解

DenseCLIP论文讲解

文章目录 简介方法总体框架 &#xff08;Language-Guided Dense Prediction&#xff09;上下文感知提示 &#xff08;Context-Aware Prompting&#xff09;应用实例 论文&#xff1a;DenseCLIP: Language-Guided Dense Prediction with Context-Aware Prompting 代码&#xff1…
阅读更多...
最全软件测试面试问题和回答，适合全文背诵

最全软件测试面试问题和回答，适合全文背诵

求职&#xff0c;类似于打仗&#xff0c;是一场挑战自己的战斗&#xff0c;也是一场跟用人单位的博弈&#xff0c;更是一场千人过独木桥的厮杀、混战。《孙子谋攻篇》中早就说了&#xff1a;"知己知彼&#xff0c;百战不殆&#xff1b;不知彼而知己&#xff0c;一胜一负&a…
阅读更多...
python数据分析——数据的选择和运算

python数据分析——数据的选择和运算

数据的选择和运算 前言一、数据选择NumPy的数据选择一维数组元素提取示例 多维数组行列选择、区域选择示例 花式索引与布尔值索引布尔索引示例一示例二 花式索引示例一示例二 Pandas数据选择Series数据获取DataFrame数据获取列索引取值示例一示例二 取行方式示例loc() 方法示例…
阅读更多...
error LNK2001: 无法解析的外部符号 “__declspec(dllimport) public: __cdecl ......

error LNK2001: 无法解析的外部符号 “__declspec(dllimport) public: __cdecl ......

运行程序时&#xff0c;报如上图所示错误&#xff0c;其中一条是&#xff1a; ReflectionProbe.obj : error LNK2001: 无法解析的外部符号 "__declspec(dllimport) public: __cdecl osg::Object::Object(bool)" (__imp_??0ObjectosgQEAA_NZ) 报这个错误一般是因为…
阅读更多...
10.轮转数组

10.轮转数组

文章目录 题目简介题目解答解法一&#xff1a;使用额外的数组代码&#xff1a;复杂度分析&#xff1a; 解法二&#xff1a;数组反转代码&#xff1a;复杂度分析&#xff1a; 题目链接 大家好&#xff0c;我是晓星航。今天为大家带来的是 轮转数组 相关的讲解&#xff01;&#…
阅读更多...
Gradle基础学习（六） 认识任务Task

Gradle基础学习（六） 认识任务Task

理解Gradle中的任务 Gradle的构建过程基于任务&#xff08;Task&#xff09;的概念&#xff0c;而每个任务都可以包含一个或多个动作&#xff08;Action&#xff09;。 任务是构建中执行的一些独立的工作单元&#xff0c;例如编译类、创建JAR、生成Javadoc或将存档发布到仓库…
阅读更多...
达梦数据库限制用户登录IP测试

达梦数据库限制用户登录IP测试

达梦数据库创建用户时可以限制登录ip和时间段。 创建测试测试用户 create user test1 identified by Test_1234 ALLOW_IP "192.168.100.101"; 限定该用户只能通过192.168.100.101地址登录数据库 连接测试 上图可见&#xff0c;192.168.100.101客户端可以连接上19…
阅读更多...
【数据结构】 二叉树的顺序结构——堆的实现

【数据结构】 二叉树的顺序结构——堆的实现

普通的二叉树是不适合用数组来存储的&#xff0c;因为可能会存在大量的空间浪费。而完全二叉树更适合使用顺序结构存储。现实中我们通常把堆(一种二叉树)使用顺序结构的数组来存储 。 一、堆的概念及结构 父节点比孩子结点大 是大堆 父节点比孩子结点小 是小堆 堆的性质 堆中某…
阅读更多...
java学习笔记反射机制

java学习笔记反射机制

2.关于反射的理解 Reflection&#xff08;反射)是被视为动态语言的关键&#xff0c;反射机制允许程序在执行期借助于Reflection API取得任何 类的内部信息&#xff0c;并能直接操作任意对象的内部属性及方法。 框架 反射 注解 设计模式。 3.体会反射机制的“动态性” //…
阅读更多...
什么是限流？常见的限流算法

什么是限流？常见的限流算法

目录 1. 什么是限流 2. 常见限流算法 3. 固定窗口算法 4. 滑动窗口算法 5. 漏桶算法 6. 令牌桶算法 7. 限流算法选择 1. 什么是限流 限流&#xff08;Rate Limiting&#xff09;是一种应用程序或系统资源管理的策略&#xff0c;用于控制对某个服务、接口或功能的访问速…
阅读更多...
WordPress插件：链接自动识别转为超链接

WordPress插件：链接自动识别转为超链接

WordPress插件&#xff1a;链接自动识别转为超链接 <?phpfunction open_links_in_new_tab() {add_filter(the_content, make_clickable);function autoblank($text) {$return str_replace(<a, <a target"_blank", $text);return $return;}add_filter(th…
阅读更多...
【Python】selenium爬虫常见用法和配置，以及常见错误和解决方法

【Python】selenium爬虫常见用法和配置，以及常见错误和解决方法

欢迎来到《小5讲堂》 这是《Python》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言无执行文件代码报错信息错误路径手动下载自动下载 选项配置Ch…
阅读更多...
面试笔记——类加载器

面试笔记——类加载器

基础 类加载器&#xff1a;用于装载字节码文件(.class文件)运行时数据区&#xff1a;用于分配存储空间执行引擎&#xff1a;执行字节码文件或本地方法垃圾回收器&#xff1a;用于对JVM中的垃圾内容进行回收 类加载器 &#xff1a;JVM只会运行二进制文件&#xff0c;类加载器的…
阅读更多...
组件目录存放问题

组件目录存放问题

目录 一、思考引入 二、组件分类 三、组件分类的目的 一、思考引入 .vue文件本质无区别&#xff0c;而路由相关的组件&#xff0c;为什么要放在views目录呢&#xff1f; 二、组件分类 .vue文件分2类&#xff1a;页面组件和复用组件。注意&#xff1a;都是.vue文件&#xff…
阅读更多...
调试记录 CPU PCIE 找不到设备，AC 耦合电容的问题

调试记录 CPU PCIE 找不到设备，AC 耦合电容的问题

1. 问题 现象&#xff1a; 1. 国产CPU的主板&#xff0c;主板内的PCIE 设备找的到&#xff0c;但是另一块板子上连接的PCIE 设备找不到。 2. 排查问题在哪里的计划 1. 检查原理图先排除信号定义的问题&#xff0c; TXRX是否反接。 2. 示波器检查PCIE 的时钟频率是否正确。 3. …
阅读更多...
蒸汽工厂的新翼：数字孪生锅炉引领未来

蒸汽工厂的新翼：数字孪生锅炉引领未来

在飞速发展的工业4.0时代&#xff0c;数字孪生技术已经深入到我们生产生活的方方面面。而对于那些承载着重工业血脉的蒸汽工厂来说&#xff0c;一项新的技术正在悄然改变它们的未来。 走进蒸汽工厂&#xff0c;感受传统与现代的交融 蒸汽工厂&#xff0c;这个充满力量与热情的…
阅读更多...
翻译《The Old New Thing》 - Restating the obvious about the WM_COMMAND message

翻译《The Old New Thing》 - Restating the obvious about the WM_COMMAND message

Restating the obvious about the WM_COMMAND message - The Old New Thing (microsoft.com)https://devblogs.microsoft.com/oldnewthing/20060302-10/?p32093 Raymond Chen 2006年03月02日 关于 WM_COMMAND 消息的显而易见的知识点补充 简要 本文详细解释了 WM_COMMAND 消息…
阅读更多...
一文读懂ipv4和ipv6的区别

一文读懂ipv4和ipv6的区别

IPv4和IPv6是互联网协议的两个主要版本&#xff0c;它们在多个方面存在显著的差异。以下是关于IPv4和IPv6之间区别的详细探讨&#xff1a; 一、地址空间 IPv4使用32位地址&#xff0c;理论上可以表示约42.9亿个不同的地址。然而&#xff0c;由于地址分配的不均衡以及网络技术的…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023