当前位置： 首页 > news >正文

【css】渐变

news 2026/2/10 10:44:43

渐变是设置一种颜色或者多种颜色之间的过度变化。

两种渐变类型：

  • 线性渐变（向下/向上/向左/向右/对角线）

  • 径向渐变（由其中心定义）

1、线性渐变

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
其中direction是方向，值可以有bottom、right、top、left 。如果该参数参数值前面添加了to，则是渐变沿着相应的方向移动。如果省略了to，则为两个参数组合的方向，比如bottom right：右下角方向。
其中从上到下是默认的方向，可以不用添加direction参数。
1.1 默认方向
代码：

<head>
<style>
#grad1 {height: 200px;background-color: blue; /* 针对不支持渐变的浏览器 */background-image: linear-gradient(blue, yellow);
}
</style>
</head>
<body><div id="grad1"></div></body>

渲染效果：
在这里插入图片描述
1.2、从左到右

代码：

<head>
<style>
#grad1 {height: 200px;background-color: blue; /* 针对不支持渐变的浏览器 */background-image: linear-gradient(to right,blue, yellow);
}
</style>
</head>
<body><div id="grad1"></div></body>

渲染效果：
在这里插入图片描述
1.3 右下角
代码：

<style>
#grad1 {height: 200px;background-color: blue; /* 针对不支持渐变的浏览器 */background-image: linear-gradient(to bottom right,blue, yellow);
}
</style>
</head>
<body><div id="grad1"></div></body>

渲染效果：
在这里插入图片描述

2、径向渐变
径是指圆形的直径的径，以圆心为出发点，沿着径向渐变，和箭靶的效果差不多。
语法：

/* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)

边缘形状可以是圆形（circle）或椭圆形（ellipse）

形式语法

<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )  <size> = <extent-keyword>              |<length [0,∞]>                |<length-percentage [0,∞]>{2}  <position> = [ left | center | right ] || [ top | center | bottom ]  |[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?  |[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#  <extent-keyword> = closest-corner   |closest-side     |farthest-corner  |farthest-side    <length-percentage> = <length>      |<percentage>  <linear-color-stop> = <color>               &&<length-percentage>?  <linear-color-hint> = <length-percentage>

代码：

<style>
#grad1 {height: 200px;width:200px;background-color: blue; /* 针对不支持渐变的浏览器 */background-image: radial-gradient(circle at center,#33691e, yellow);
}
</style>
</head>
<body><div id="grad1"></div></body>

渲染效果：
在这里插入图片描述
关于径向渐变的详细介绍可以参考MDN Web Docs社区

相关文章：

【css】渐变

渐变是设置一种颜色或者多种颜色之间的过度变化。 两种渐变类型&#xff1a; 线性渐变&#xff08;向下/向上/向左/向右/对角线&#xff09; 径向渐变&#xff08;由其中心定义&#xff09; 1、线性渐变 语法&#xff1a;background-image: linear-gradient(direction, co…...

编程日记 2023/8/9 18:50:13

idea打开多个项目需要开多个窗口（恢复询问弹窗）

【版权所有&#xff0c;文章允许转载&#xff0c;但须以链接方式注明源地址&#xff0c;否则追究法律责任】【创作不易&#xff0c;点个赞就是对我最大的支持】 前言 仅作为学习笔记&#xff0c;供大家参考 总结的不错的话&#xff0c;记得点赞收藏关注哦&#xff01; 使用…...

编程日记 2023/8/9 18:49:12

篇十三：策略模式：选择不同算法

篇十三&#xff1a;“策略模式&#xff1a;选择不同算法” 设计模式是软件开发中的重要知识&#xff0c;策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;用于在运行时根据不同的需求选择不同的算法或行为。本文将探讨策略模式的作用和实现…...

编程日记 2023/8/9 18:48:11

Centos7.6 安装mysql过程全记录

在centos 7.6上 离线安装mysql 的步骤&#xff0c;可参考下文&#xff1a; 一、查看当前MySQL的安装情况并卸载 1. 查看当前MySQL的安装情况 查找之前是否安装了MySQL rpm -qa|grep -i mysql 2.卸载mysql 如果已经安装mysql&#xff0c;则需要先停止MySQL&#xff0c;再删除…...

编程日记 2023/8/9 18:46:09

Java中的Guava是什么？

Java中的Guava是一个非常强大的Java库&#xff0c;它提供了很多实用的工具类和方法&#xff0c;可以帮助我们更高效地开发Java应用程序。从新手的角度来看&#xff0c;Guava可以让我们在Java编程中变得更加简单、快速和高效。 Guava的命名来源于“Google’s favorite Java lib…...

编程日记 2023/8/9 18:45:08

vue.js兄弟组件方法调用b组件调用a组件方法

vue.js 中兄弟组件方法调用 场景&#xff1a;父组件中同时引入两个子组件&#xff08;A和B&#xff09;&#xff0c;此时B组件点击按钮需要调用A组件里面的方法 方案1&#xff1a;vue的事件总线 方案2&#xff1a;自定义事件&#xff08;$emit&#xff09; 最终方案&#xff1a…...

编程日记 2023/8/9 18:44:07

【Kubernetes】二进制搭建

目录 二进制搭建 Kubernetes v1.20 操作系统初始化配置 关闭防火墙 关闭selinux 关闭swap 根据规划设置主机名 在master添加hosts 调整内核参数 时间同步 部署 etcd 集群 准备签发证书环境 准备cfssl证书生成工具 生成Etcd证书 上传 etcd-cert.sh 和 etcd.sh 到 …...

编程日记 2023/8/9 18:43:06

【MFC】08.MFC消息，自定义消息，常用控件（MFC菜单创建大总结），工具栏，状态栏-笔记

本专栏上几篇文章讲解了MFC几大机制&#xff0c;今天带领大家学习MFC自定义消息以及常用控件&#xff0c;最常用的控件请查看本专栏第一二篇文章&#xff0c;今天这篇文章介绍工具栏&#xff0c;菜单和状态栏&#xff0c;以及菜单创建大总结。 文章目录 MFC消息分类&#xff1…...

编程日记 2023/8/9 18:42:04

Clickhouse 数据存储

一、数据分区 数据是以分区目录的形式组织的&#xff0c;每个分区独立分开存储.这种形式&#xff0c;查询数据时&#xff0c;可以有效的跳过无用的数据文件。 1.1 数据分区的规则 分区键的取值&#xff0c;生成分区ID&#xff0c;分区根据ID决定。根据分区键的数据类型不同&am…...

编程日记 2023/8/9 18:41:02

c语言每日一练(3)

前言&#xff1a;每日一练系列&#xff0c;每一期都包含5道选择题&#xff0c;2道编程题&#xff0c;博主会尽可能详细地进行讲解&#xff0c;令初学者也能听的清晰。每日一练系列会持续更新&#xff0c;暑假时三天之内必有一更&#xff0c;到了开学之后&#xff0c;将看学业情…...

编程日记 2023/8/9 18:39:59

java基础-Stream（流）、File（文件）和IO

Java中的流(Stream)提供了一个统一的接口来处理输入和输出数据&#xff0c;文件(File)提供了一种简单的方式来操作磁盘上的文件&#xff0c;而I/O则允许我们在Java程序中读写数据。 一、流Stream java中得stream是一种抽象概念&#xff0c;流可以从多种来源读取数据&#xff…...

编程日记 2023/8/9 18:38:58

el-table实现指定列合并

table传入span-method方法可以实现合并行或列&#xff0c;方法的参数是一个对象&#xff0c;里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组&#xff0c;第一个元素代表rowspan&#xff0c;第二个元素…...

编程日记 2023/8/9 18:37:57

38.利用matlab解 有约束无约束的参数估计对比（matlab程序）

1.简述 1.离散型随机变量的极大似然估计法: (1) 似然函数 若X为离散型, 似然函数为 (2) 求似然函数L(θ)的最大值点 θ, 则θ就是未知参数的极大似然估计值. 2.连续型随机变量的极大似然估计法: (1) 似然函数 若 X 为连续型, 似然函数为 (2) 求似然函数L(θ)的最大值点θ, 则…...

编程日记 2023/8/9 18:36:56

什么是React？React与VU的优缺点有哪些？

什么是React&#xff1f;什么是VUE&#xff1f; 维基百科上的概念解释&#xff0c;Vue.js是一个用于创建用户界面的开源MVVM前端JavaScript框架&#xff0c;也是一个创建单页应用的Web应用框架。Vue.js由尤雨溪&#xff08;Evan You&#xff09;创建&#xff0c;由他和其他活跃…...

编程日记 2023/8/9 18:35:54

区块链技术助力慈善，为您的善举赋予全新力量！

我们怀揣着一颗温暖的心&#xff0c;秉承着公开透明的理念&#xff0c;带着信任与责任&#xff0c;倾力打造了一套区块链技术驱动的去中心化捐赠与物资分发系统&#xff0c;通过智能生态网络&#xff08;IEN&#xff09;解决捐赠不透明问题的系统&#xff0c;让您的善举直接温暖…...

编程日记 2023/8/9 18:34:53

模拟实现消息队列项目(系列4) -- 服务器模块(内存管理)

目录 前言 1. 创建MemoryDataCenter 2. 封装Exchange 和 Queue方法 3. 封装Binding操作 4. 封装Message操作 4.1 封装消息中心集合messageMap 4.2 封装消息与队列的关系集合queueMessageMap的操作 5. 封装未确认消息集合waitMessage的操作 6. 从硬盘中恢复数据到内存中 7. Memo…...

编程日记 2023/8/9 18:33:50

STM32 LoRa源码解读

目录结构&#xff1a; SX1278 |-- include | |-- fifo.h | |-- lora.h | |-- platform.h | |-- radio.h | |-- spi.h | |-- sx1276.h | |-- sx1276Fsk.h | |-- sx1276FskMisc.h | |-- sx1276Hal.h | |-- sx1276LoRa.h | -- sx1276LoRaMisc.h – src |-- fifo.c |-- lora.c |-- …...

编程日记 2023/8/9 18:32:48

【BASH】回顾与知识点梳理（十）

【BASH】回顾与知识点梳理 十 十. 文件的格式化与相关处理10.1 格式化打印&#xff1a; printf10.2 awk&#xff1a;好用的数据处理工具awk 的逻辑运算字符 10.3 文件比对工具diffcmppatch 10.4 文件打印准备&#xff1a; pr 该系列目录 --> 【BASH】回顾与知识点梳理&#…...

编程日记 2023/8/9 18:31:45

【网络】应用层——HTTPS协议

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《网络》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; HTTPS协议 &#x1f349;HTTP的不安全性&#x1f349;认识HTTPS协议&#x1f353;加密解密&#x1f35…...

编程日记 2023/8/9 18:30:44

Windows新版文件资源管理器经常在后台弹出的临时解决方案

禁用组策略自动刷新 运行gpedit.msc找到计算机配置->管理模板->系统->组策略找到 “关闭组策略的后台刷新”启用 参考 https://answers.microsoft.com/en-us/windows/forum/all/windows-11-most-recently-opened-explorer-window/26e097bd-1eba-4462-99bd-61597b5…...

编程日记 2023/8/9 18:29:42

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2026/2/4 16:21:14

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2026/1/30 6:20:08

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

编程新知 2025/12/29 22:20:36

深入解析 ReentrantLock：原理、公平锁与非公平锁的较量

ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类，用于实现线程同步，支持可重入性，并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...

编程新知 2025/10/12 23:48:51

五、jmeter脚本参数化

目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...

编程新知 2026/1/26 19:39:14