CSS 径向渐变

news2025/2/24 8:28:34
background: radial-gradient([ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> );

属性解析:

        ending-shape :渐变结束的形状 默认为椭圆ellipse,可以设置为圆形circle

        size:渐变结束形状的大小;默认为最远角

size的值:相较于渐变中心点

        closest-side: 与容器最近的一条边相切

        closest-corner:与容器最近的一个角相交

        farthest-side: 与容器最远的一条边相切

        farthest-corner: 与容器最远的一个角相交

        一个数字:如果ending-shape指定为圆形时,此值表示半径

        两个百分比:ending-shape省略时,表示椭圆的大小,第一个水平半径,第二个垂直半径

       

        position:径向渐变开始的位置,默认是中心点

x/y的坐标

一个值:center、top、 left、bottom、right(另一个纬度默认为50%)

两个值:一个是x坐标,一个是y坐标,可以是关键词,可以像素数,可以是百分比

        注意:

        1. 只要是left、right就是指定x坐标,top、bottom是指定y坐标,位置不固定

        2. 如果是百分比或数字,则第一个是x 第二个是y

        3. 如果两个都是数字或百分比,则按照顺序分别为 x或者y

三个值:

        1. 前两个值是关键字时,第三个是偏移量

        2. 如果第二个值是数字或百分比,则它是第一个值的偏移量,如果是第三个值,则是第二个值的偏移量

        3. 一个关键字+2个数字或百分比的组合是无效的

四个值:第一个和第三个是定义xy的关键词,第二个和第四个是偏移量

       linear-color-stop: 颜色及结束位置

        多个颜色之间用逗号隔开

示例:

1. background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c); 

 2. background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

3. background: radial-gradient(ellipse at top, #e66465, transparent), radial-gradient(ellipse at bottom, #4d9f0c, transparent);

 

 

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

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

相关文章

R语言 | 认识apply家族

目录 一、apply()函数 二、sapply()函数 三、lapply()函数 四、tapply()函数 ​五、iris鸢尾花数据集 R语言提供了一个循环系统称apply家族&#xff0c;它具有类似for循环的功能&#xff0c;但是若想处理相同问题&#xff0c;apply家族函数好用太多了。 一、apply()函数 …

隐藏加密文件夹怎么找到?看这里就够了!

当隐藏遇到加密&#xff0c;可以很好地保护电脑文件夹数据安全&#xff0c;那么隐藏加密的文件夹该怎么找到呢&#xff1f;方法其实很简单&#xff0c;下面我们通过两款提供文件夹隐藏加密的软件来了解一下。 文件夹加密超级大师 作为一款能够提供5种文件夹加密类型的软件&…

Java线程池七个参数详解:核心线程数、最大线程数、空闲线程存活时间、时间单位、工作队列、线程工厂、拒绝策略

ThreadPoolExecutor是JDK中的线程池实现&#xff0c;这个类实现了一个线程池需要的各个方法&#xff0c;它提供了任务提交、线程管理、监控等方法。 下面是ThreadPoolExecutor类的构造方法源码&#xff0c;其他创建线程池的方法最终都会导向这个构造方法&#xff0c;共有7个参…

什么是网络——TCP/IP协议

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。座右铭&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石&#xff0c;故能成其高。个人主页&#xff1a;小李会科技的…

聚观早报 | 科大讯飞称10月整体赶超ChatGPT;苹果遭欧盟警告

今日要闻&#xff1a;科大讯飞称10月整体赶超ChatGPT&#xff1b;苹果遭欧盟警告&#xff1b;科研人员研发纳米粒子治疗癌症&#xff1b;中小学教材不得夹带商业广告&#xff1b;Z-Library又被美国FBI查封了 科大讯飞称10月整体赶超ChatGPT 5 月 6 日&#xff0c;科大讯飞董事…

JS判断用户终端与CSS判断用户终端的写法(源代码实例)

当用户使用手机等移动终端访问网站时&#xff0c;我们可以通过程序检测用户终端类型&#xff0c;如果是手机用户&#xff0c;则引导用户访问适配手机屏幕的移动站点。 JS判断用户终端&#xff1a; // 判断浏览器类型 myBrowser() {var userAgent navigator.userAgent; //取得…

Python每日一练(20230508) 石子游戏 I\II\III

目录 1. 石子游戏 Stone Game I 2. 石子游戏 Stone Game II 3. 石子游戏 Stone Game III &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 石子游戏 Stone Game I Alice 和 Bob 用几堆…

数字化转型对企业的好处有哪些(下)

过时的技术、流程和客户关系管理困难是当前阻碍企业增长的主要障碍&#xff0c;CRM系统是企业数字化转型的主要工具&#xff0c;帮助企业简化操作、提高效率&#xff0c;为客户提供更加卓越的客户体验。下面说说&#xff0c;企业数字化转型的十大好处。 5、提升竞争力 数字技…

HQChart实战教程61-自定义十字星K线颜色

HQChart实战教程61-自定义平盘K线颜色 十字星步骤1. 注册事件2. 监听回调函数阐述说明HQChart插件源码地址完整的demo源码十字星 十字星是一种K线基本型态。十字星,是一种只有上下影线,没有实体的K线图。开盘价即是收盘价,表示在交易中,股价出现高于或低于开盘价成交,但收…

asp.net+sqlserver社区居民健康档案管理系统

社区居民健康档案管理系统1 摘 要1 1 课题背景及研究内容1 1.1 课题背景和意义1 1.2 研究现状1 1.3 论文结构安排1 2 系统开发环境3 2.1开发工具介绍3 2.1.1 Visual Studio介绍3 2.1.2 SQL Server介绍4 2.1.3 IIS介绍4 2.2 动态网站技术介绍4 2.3开发模式B/S介绍4 2.4 AS…

【云台】开源版本SimpleBGC的传感器校准与姿态融合

传感器校准 俄版云台使用的是 MPU6050&#xff0c;磁力计使用的是 HMC5883 MPU6050校准 MPU6050校准包含两部分&#xff1a;加速度计与陀螺仪。校准过程想要校准出的数据也就是加速度计与陀螺仪的温漂与零漂。 正常来说&#xff0c;如果将 IMU 朝上静置&#xff0c;加速度计…

SSM框架学习-Spring Framework系统架构

Spring是一个用来管理对象的技术&#xff1b; 上层需要依赖下层的支持&#xff1b; 面向切面编程&#xff1a;在不影响原始程序的基础上&#xff0c;增强功能&#xff1b; 提供数据访问与集成&#xff1a;说明兼容其它方式访问数据&#xff1b; Transactions&#xff1a;事务控…

第四十章 Unity 按钮 (Button) UI

本章节我们介绍一下按钮UI。首先&#xff0c;我们创建一个新的场景“SampleScene3.unity”。然后&#xff0c;在菜单栏中点击“GameObject”->“UI”->“Button”&#xff0c;截图如下 我们选中刚刚创建的Button&#xff0c;然后查看它的Inspector检视面板&#xff0c;如…

SonarQube Api调用指南

好几年前写过一篇sonar api调用的文档&#xff0c;很多人看&#xff0c;但是当时写的比较简陋&#xff0c;很多小伙伴在下方留言&#xff0c;也答应过一些小伙伴些一篇示例&#xff0c;本文主要目的是一篇扫盲贴。 一、接口文档 要使用sonarqube的api接口&#xff0c;你首先要…

递归递推练习题答案

1.用递归的方法123…N的值&#xff08;in:5,out:15&#xff09; def dg(n):if n1:return 1else:return dg(n-1)n nint(input()) print(dg(n))2.输出斐波那契数列的第N项&#xff0c;0&#xff0c;1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8&#xf…

GIT:git 教程

1. 版本控制 版本控制&#xff08;Revision Control&#xff09;用于在开发过程中管理文件修改历史&#xff0c;方便查看和备份。 它的作用如下&#xff1a; 实现跨区域多人协同开发。追踪和记载一个或者多个文件的历史记录。组织和保护你的源代码和文档。统计工作量。并行开…

Java EE企业级应用开发(SSM)第9章

第9章MyBatis入门 一.预习笔记 1.MyBatis框架的特点 1-1.简单易学 1-2.灵活 1-3.提供映射标签 2.MyBatis核心类 2-1.Configuration 2-2.SqlSessionFactory 2-3.SqlSession 2-4.Exector 2-5.MappedStatement 3.MyBatis工作流程 4.Mybatis入门程序 4-0&#xff1a;导…

RFID安全的三次认证

一.RFID介绍 RFID是Radio Frequency Identification的缩写&#xff0c;即射频识别。它是一种通过用电磁场收集数据并从远距离自动识别物体的技术。它使用无线电波来将信息从一个电子标签传输到读卡器中&#xff0c;而不需要直接接触。这些标签可以嵌入到物品中或附加到物品表面…

用Python给模板邮件加彩蛋

需求是这样来的&#xff0c;笔者写了很多的邮件通知模板&#xff0c;里面的内容都是千篇一律的&#xff0c;比如说&#xff0c;***你好&#xff0c;请查收附件什么什么报告&#xff0c;然后在署名&#xff0c;结束。这样的模板邮件会一直发下去&#xff0c;用户看久了会很单调。…

基于C#制作的锁屏小工具,点击图片内容解锁

自己制作的一个无厘头电脑锁屏工具被同事发现了&#xff0c;纷纷要求给他们量身定制安排一套 一、开发步骤1.1 创建项目1.2 窗体设置1.3 键盘钩子事件1.4 解锁按钮设置 一、开发步骤 1.1 创建项目 打开Visual Studio&#xff0c;右侧选择创建新项目。 搜索框输入winform&#…