前端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.hqwc.cn/news/681672.html

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

相关文章

vue3+ts--实际开发之--table表格打印或者保存

vue3+ts--实际开发之--table表格打印或者保存

vue3实现指定区域打印&#xff08;导出&#xff09;功能-主要是解决分页内容分割问题 一、 问题页面效果二、 Print.js相关属性 和使用1. 介绍2. 安装引入3. PrintJS参数配置表 三 、解决关于分页文字或者表格被分割问题&#xff0c;解决后如下&#xff1a;1. 设置一个自定义ta…
阅读更多...
Linux 第二十四章

Linux 第二十四章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…
阅读更多...
浴室家具360度VR三维沉浸式展示提升品牌价值-深圳华锐视点

浴室家具360度VR三维沉浸式展示提升品牌价值-深圳华锐视点

随着家居用品市场的持续升温&#xff0c;消费者对家居产品的需求日益旺盛&#xff0c;企业商家也迎来了前所未有的购买热潮。在这个充满机遇与挑战的时代&#xff0c;如何打破传统展示方式的局限&#xff0c;以更直观、更生动的方式呈现家居产品&#xff0c;成为企业提升竞争力…
阅读更多...
笑铺日记：一年多赚10W，客户越买越上瘾的新手段

笑铺日记：一年多赚10W，客户越买越上瘾的新手段

听说过二八原则吗&#xff1f; 一家店80%的利润&#xff0c;是20%的核心客户贡献的。 维护好这20%的客人&#xff0c;更容易换来真金白银噢~ 这20%的客户怎么找&#xff1f; 当然是从你家会员里找&#xff01; 笑铺日记手把手教你&#xff01; 首先&#xff0c;给每个消费…
阅读更多...
域名系统（DNS）、DNS 服务器和 IP 地址概念解释

域名系统（DNS）、DNS 服务器和 IP 地址概念解释

​　　域名系统、DNS服务器和IP地址是构成互联网基础设施的重要部分。它们共同协作&#xff0c;使得人们能够方便地使用各种网络服务&#xff0c;而无需去记住复杂的数字地址。那么&#xff0c;域名系统、DNS 服务器和 IP 地址又该如何理解?本文主要讲讲关于这几个名词的概念解…
阅读更多...
容器化管理SpringBoot项目：在用jar包制作镜像的时候遇到的错误记录

容器化管理SpringBoot项目：在用jar包制作镜像的时候遇到的错误记录

在容器化管理SpringBoot项目&#xff0c;进行到“用jar包制作镜像”一步时&#xff0c;遇到的error真的是一环接着一环&#xff0c;这里就记录一下&#xff0c;一套流程下来遇到的error&#xff0c;以及一些我的解决方法&#xff1a; ERROR: "docker buildx build" r…
阅读更多...
Linux网络部分——部署YUM仓库及NFS共享服务

Linux网络部分——部署YUM仓库及NFS共享服务

目录 一、yum仓库服务 1. 软件仓库的提供方式 2.如何构建并使用ftp软件仓库&#xff08;与本地yum源方法一致&#xff09; 3.如何搭建使用yum在线源&#xff1f; 4.yum软件包下载如何保存&#xff1f; 二、NFS共享存储服务 1.存储类型 2.提供共享存储的组合 3.NFS网络…
阅读更多...
【MATLAB源码-第52期】基于matlab的4用户DS-CDMA误码率仿真，对比不同信道以及不同扩频码。

【MATLAB源码-第52期】基于matlab的4用户DS-CDMA误码率仿真，对比不同信道以及不同扩频码。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 DS-CDMA (Direct Sequence Code Division Multiple Access) 是一种多址接入技术&#xff0c;其基本思想是使用伪随机码序列来调制发送信号。DS-CDMA的特点是所有用户在同一频率上同时发送和接收信息&#xff0c;但每个用户使…
阅读更多...
【热门话题】ElementUI 快速入门指南

【热门话题】ElementUI 快速入门指南

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 ElementUI 快速入门指南环境准备安装 ElementUI创建 Vue 项目安装 ElementUI 基…
阅读更多...
学习100个Unity Shader (17) --- 深度纹理

学习100个Unity Shader (17) --- 深度纹理

文章目录 效果shader部分C# 部分理解参考 效果 shader部分 Shader "Example/DepthTexture" {SubShader{Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"sampler2D _CameraDepthTexture;struct a2v{float4 pos : POSITIO…
阅读更多...
商务分析方法与工具（六）：Python的趣味快捷-字符串巧妙破解密码本、身份证号码、词云图问题

商务分析方法与工具（六）：Python的趣味快捷-字符串巧妙破解密码本、身份证号码、词云图问题

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…
阅读更多...
二本生如何从大一准备考研！？保姆级全攻略

二本生如何从大一准备考研！？保姆级全攻略

如果是二本大学&#xff0c;那考研确实是一个很好的机会 如果大家就有考研的打算&#xff0c;那就好好学习&#xff0c;好好学习英语&#xff0c;数学&#xff08;理工科&#xff09;和专业课&#xff0c;这些课程在考研的时候是肯定会考的 特别是英语和数学&#xff08;理工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023