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

css3背景渐变

news 2026/4/10 23:48:22

1.线性渐变

    <style>.box {width: 200px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;}.box1 {background-image: linear-gradient(green, yellow, red);}/* 右上 */.box2 {background-image: linear-gradient(to right top, green, yellow, red);}.box3 {background-image: linear-gradient( 60deg, green, yellow, red);}.box4 {background-image: linear-gradient(green 50px, yellow 100px, red 150px);}.box5 {background-image: linear-gradient(20deg, green 50px, yellow 100px, red 150px);font-size: 80px;font-weight: bold;line-height: 200px;color: transparent;-webkit-background-clip: text;}</style>
<body><div class="box box1">box1</div><div class="box box2">box2</div><div class="box box3">box3</div><div class="box box4">box4</div><div class="box box5">hello</div>
</body>

 2.径向渐变

    <style>.box {width: 200px;height: 150px;border: 1px solid black;float: left;margin-left: 50px;}.box1 {/* 默认情况 */background-image: radial-gradient(red, yellow, green);}.box2 {/* 圆心在右上角 */background-image: radial-gradient(at right top, red, yellow, green);}.box3 {/* 圆心在（20，40） */background-image: radial-gradient(at 20px 40px,red, yellow, green);}.box4 {/* 通过circle，调整为⚪ */background-image: radial-gradient(circle,red, yellow, green);}.box5 {/* 圆半径是 100 50，圆心位置（120，60） */background-image: radial-gradient(100px 50px at 120px 60px ,red, yellow, green);}</style>
<body><div class="box box1">默认</div><div class="box box2">调整径向圆心</div><div class="box box3">通过左边调整中心位置</div><div class="box box4">通过circle，调整为⚪ </div><div class="box box5"> 圆半径是 100 50，圆心位置（120，60）</div>
</body>

3.重复渐变

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。

利用重复渐变实现网格效果

代码如下：

.box {width: 600px;height: 800px;padding: 20px;border: 1px solid black;position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;background-image: repeating-linear-gradient(transparent 0, transparent 29px, #333 30px);background-clip: content-box;}<div class="box"></div>

相关文章：

css3背景渐变

1.线性渐变 <style>.box {width: 200px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;}.box1 {background-image: linear-gradient(green, yellow, red);}/* 右上 */.box2 {background-image: linear-gradient(to right top, green, yellow, re…...

编程日记 2023/8/10 9:14:29

windows 安装免费3用户ccproxy ubuntu 代理上网

Windows 上进行安装 ubuntu 上进行设置 方法一 (临时的手段) 如果仅仅是暂时需要通过http代理使用apt-get&#xff0c;您可以使用这种方式。 在使用apt-get之前&#xff0c;在终端中输入以下命令&#xff08;根据您的实际情况替换yourproxyaddress和proxyport&#xff09;。 终…...

编程日记 2023/8/10 9:13:27

B树的插入与删除过程

B树的插入 原树&#xff1a; 插入key后&#xff0c;若导致原节点关键字数超过上限&#xff0c;则从中间位置&#xff08; ⌈ m 2 ⌉ \lceil\frac{m}{2}\rceil ⌈2m​⌉&#xff09;将关键字分成两部分&#xff0c;左部分包含的关键字放在原节点中&#xff0c;右部分包含的关键…...

编程日记 2023/8/10 9:12:24

【二分】CF1623 C

Problem - 1623C - Codeforces 题意&#xff1a; 思路&#xff1a; 肯定是二分&#xff0c;我们去二分最小值&#xff0c;然后check的时候最小值要大于mid check的时候要让最小值尽可能大 注意到我们不需要去管最大值&#xff0c;只需要最小值尽可能大就好了&#xff0c;因…...

编程日记 2023/8/10 9:11:23

redis五大类型分析--list(1)

此篇为对redis五大数据类型中list的分析&#xff0c;希望能有所帮助 List API listTypePush函数 void listTypePush(robj *subject, robj *value, int where) {/* 检查编码类型是否为 quicklist (快速列表) */if (subject->encoding OBJ_ENCODING_QUICKLIST) {/* 根据参数…...

编程日记 2023/8/10 9:10:22

【多重信号分类】超分辨率测向方法——依赖于将观测空间分解为噪声子空间和源/信号子空间的方法具有高分辨率（HR）并产生准确的估计（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/10 9:09:21

【Express.js】集成Websocket

集成websocket 本节我们介绍在如何在 express 中集成 websocket。 WebSocket 服务器可以主动向客户端推送信息&#xff0c;客户端也可以主动向服务器发送信息&#xff0c;是真正的双向平等对话&#xff0c;属于服务器推送技术的一种。 准备工作 创建一个 express.js 项目&a…...

编程日记 2023/8/10 9:08:19

MachineLearningWu_14/P65-P69_Multiclass

x.1 Multiclass多分类问题 对于分类问题&#xff0c;往往指的是二分类问题&#xff0c;而对于二分类的decision boundary较为简单&#xff0c;而实际生活中会有很多问题是多分类问题&#xff0c;例如MNIST手写数字识别&#xff0c; 从特征空间上来看&#xff0c;二分类和多分类…...

编程日记 2023/8/10 9:07:17

深入理解高并发编程 - SimpleDateFormat 类的线程安全问题

1、重现与解决 1.1、重现 import java.text.SimpleDateFormat; import java.util.Date;public class UnsafeSimpleDateFormatExample {public static void main(String[] args) {SimpleDateFormat sdf new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");Runnable task…...

编程日记 2023/8/10 9:06:15

接口幂等性实现方式

优质博文&#xff1a;IT-BLOG-CN 幂等 操作的特点是一次和多次请求某一个资源对于资源本身应该具有同样的结果&#xff08;网络超时等问题除外&#xff09;。幂等函数或幂等方法是指可以使用相同参数重复执行&#xff0c;并能获得相同结果的函数。这些函数不会影响系统状态&am…...

编程日记 2023/8/10 9:05:15

redis高可用之持久化

目录 一、Redis 高可用的相关知识 1&#xff09;什么是高可用 2&#xff09;Redis的高可用技术 3&#xff09;持久化的功能 4&#xff09;redis持久化的方式 二、RDB持久化 1&#xff09;RDB持久化的触发方式 &#xff08;1&#xff09;手动触发 &#xff08;2&…...

编程日记 2023/8/10 9:04:13

Cocos Creator 3.8 后期效果 Shader 编写（2/2） 进阶篇

前言 在上一篇文章中&#xff0c;麒麟子给大家分享了如何在 Cocos Creator 3.8 中的自定义管线中&#xff0c;添加属于自己的后期效果 Shader。 但基于 BlitScreen 的方案&#xff0c;我们只能编写最简单后效 Shader&#xff0c;如果我们想要支持更多复杂的 Shader&#xff0c…...

编程日记 2023/8/10 9:03:12

【JS自用模板】自动点击选课的操作模板

以激动点击课程为案例复习一下基本前端&#xff0c;容易涉及的问题包括如何提取object类的数字&#xff0c;setTimeout为什么不起作用&#xff1f; 具体思路是&#xff0c;此处会立刻选中符合条件的页面元素打开&#xff0c;然后1小时后会刷新页面&#xff0c;相应地播放页面也…...

编程日记 2023/8/10 9:02:10

TENNECO EDI 项目——X12与XML之间的转换

近期为了帮助广大用户更好地使用 EDI 系统&#xff0c;我们根据以往的项目实施经验&#xff0c;将成熟的 EDI 项目进行开源。用户安装好知行之桥EDI系统之后&#xff0c;只需要下载我们整理好的示例代码&#xff0c;并放置在知行之桥指定的工作区中&#xff0c;即可开始使用。 …...

编程日记 2023/8/10 9:01:09

C++项目：在线五子棋对战（网页版）

项目介绍 本项⽬主要实现⼀个⽹⻚版的五⼦棋对战游戏&#xff0c;其主要⽀持以下核⼼功能&#xff1a; • 用户管理:实现用户注册&#xff0c;用户登录、获取用户信息、用户天梯分数记录、用户比赛场次记录等。 • 匹配对战:实现两个玩家在网页端根据天梯分数匹配游戏对⼿&…...

编程日记 2023/8/10 9:00:07

flutter遇到的小问题记录

flutter-getx的Get.bottomSheet组件改变高度 Get.bottomSheet( isScrollControlled: true,) isScrollControlled: true 就是控制高度 (无语) 截取视频第一针 返回的是本地url 或者Uint8List的数据 String? videoStr await VideoThumbnail.thumbnailFile(video: videoPath,…...

编程日记 2023/8/10 8:59:07

Golang bitset 基本使用

安装&#xff1a; go get github.com/bits-and-blooms/bitset下面代码把fmtx换成fmt就行 //------------基本操作------------//构建一个64bit长度的bitsetb : bitset.New(64)//放入一个数b.Set(10)fmtx.Println("add-10&#xff1a;", b.DumpAsBits()) // 0000000…...

编程日记 2023/8/10 8:58:06

sql 分组讨论，二级分组（非2个字段分组），使用 窗口函数和普通分组实现

1. 二级分组需求 先按照一个字段分组&#xff0c;在按照 第二个字段分组。之后&#xff0c;如果 这个 二级分组中的数据&#xff0c;是 > 1条的。就筛选出来。 比如&#xff1a; 先按照 站点分组&#xff0c;再按照 设备分组&#xff0c; 即&#xff1a;如果站点上配置了…...

编程日记 2023/8/10 8:57:04

业务中如何过滤敏感词

在我们访问网站的时候&#xff0c;如果发现我们发布的内容有色情暴力的东西等等&#xff0c;会屏蔽掉&#xff0c;这种行为就是过滤敏感词。 从技术层面实现起来&#xff0c;其实比较简单&#xff0c;因为我们输入的内容就是一个大型的字符串&#xff0c;我们要调用某些api来判…...

编程日记 2023/8/10 8:56:03

用服务器搭建网站需要做什么

网站建设是一个广义的术语&#xff0c;涵盖了许多不同的技能和学科中所使用的生产和维护的网站。不同领域的网页设计&#xff0c;网页图形设计&#xff0c;界面设计&#xff0c;创作&#xff0c;其中包括标准化的代码和专有软件&#xff0c;用户体验设计和搜索引擎优化。许多人…...

编程日记 2023/8/10 8:55:01

组织熵增 vs AI原生熵减：用香农-组织信息论量化研发效能衰减（SITS2026首次发布行业基准值）

第一章&#xff1a;组织熵增 vs AI原生熵减&#xff1a;用香农-组织信息论量化研发效能衰减&#xff08;SITS2026首次发布行业基准值&#xff09; 2026奇点智能技术大会(https://ml-summit.org) 传统软件研发组织正面临不可逆的“组织熵增”——需求模糊度上升、接口契约漂移…...

编程新知 2026/4/10 23:24:01

解决easyExcel写入Excel时遇到的cglib与asm版本冲突问题

1. 当easyExcel遇上cglib与asm&#xff1a;一场版本冲突引发的血案 最近在项目中使用easyExcel导出数据时&#xff0c;突然遇到了一个让人头疼的报错&#xff1a;ExcelGenerateException伴随着ExceptionInInitializerError。作为一名Java开发者&#xff0c;看到这种嵌套异常第一…...

编程新知 2026/4/10 21:56:12

Qt桌面应用集成Edge内核：保姆级WebView2环境配置与NuGet包本地化部署指南

Qt桌面应用集成Edge内核&#xff1a;WebView2环境配置与本地化部署实战 在Windows平台下开发Qt应用时&#xff0c;传统的Qt WebEngine模块虽然功能完备&#xff0c;但存在启动缓慢、内存占用高、编译体积大等问题。许多开发者开始寻求更轻量高效的替代方案&#xff0c;而微软E…...

编程新知 2026/4/10 21:24:46

HTML 中使用 EXIF.js 读取图片元数据失败的常见原因与解决方案

本文详解在 html 页面中使用 exif.js 库无法获取图片 exif 信息的核心原因&#xff08;主要是跨域限制&#xff09;&#xff0c;提供可立即运行的修复代码、cors 原理说明及本地开发避坑指南。 本文详解在 html 页面中使用 exif.js 库无法获取图片 exif 信息的核心原因&am…...

编程新知 2026/4/10 21:18:23

【算法日记 11】贪心之美：用“相邻交换法”秒杀乱序求极值问题

&#x1f680;【算法日记 11】贪心之美&#xff1a;用“相邻交换法”秒杀乱序求极值问题 &#x1f4cd; 场景引入&#xff1a;百醇的终极摆放艺术 今天遇到了一道看似毫无头绪的排列极值题&#xff1a;题目大意&#xff1a;有 NNN 根百醇&#xff0c;每根有长度 AiA_iAi​ 和美…...

编程新知 2026/4/10 21:01:43

别再让全连接层拖慢你的模型了！用PyTorch的AdaptiveAvgPool2d实现GAP，参数量直降90倍

用全局平均池化替代全连接层&#xff1a;PyTorch实战与90倍参数削减 当你面对一个训练缓慢、显存吃紧的卷积神经网络时&#xff0c;是否曾盯着全连接层那庞大的参数量感到无力&#xff1f;在边缘设备上部署模型时&#xff0c;是否因为全连接层的计算开销而不得不降低模型精度&a…...

编程新知 2026/4/10 17:46:23

5个内容访问解决方案：突破数字阅读限制的非技术人员实践指南

5个内容访问解决方案&#xff1a;突破数字阅读限制的非技术人员实践指南 在信息爆炸的时代&#xff0c;优质内容往往被付费墙阻隔&#xff0c;成为知识获取的障碍。本文将系统解析内容访问限制的技术原理&#xff0c;对比5种主流内容访问解决方案的适用场景与实施难度&#xff…...

编程新知 2026/4/10 15:49:54

RV1126边缘设备性能实测：YOLOv8s vs YOLOv8m，谁才是性价比之王？

RV1126边缘设备性能实测&#xff1a;YOLOv8s与YOLOv8m的终极对决 在嵌入式AI领域&#xff0c;选择适合硬件平台的模型版本往往比模型本身更重要。当我们将目光投向Rockchip RV1126这类边缘计算设备时&#xff0c;YOLOv8系列中的s&#xff08;small&#xff09;和m&#xff08;m…...

编程新知 2026/4/10 14:52:06

CAGE vs RNA-seq：两种转录组测序技术的深度对比

在选择转录组测序方案时&#xff0c;你是否也在 CAGE 和 RNA-seq 之间犹豫&#xff1f;本文带你深入了解两种技术的核心差异与各自优势。转录组测序是功能基因组学研究的核心技术。在众多技术中&#xff0c;CAGE&#xff08;Cap Analysis of Gene Expression&#xff09;和RNA-…...

编程新知 2026/4/10 14:05:52

GKD订阅管理终极指南：如何用3步轻松解决订阅混乱难题

GKD订阅管理终极指南&#xff1a;如何用3步轻松解决订阅混乱难题 【免费下载链接】GKD_THS_List GKD第三方订阅收录名单 项目地址: https://gitcode.com/gh_mirrors/gk/GKD_THS_List 你是不是也遇到过这样的场景&#xff1f;打开GKD应用&#xff0c;面对几十个订阅源却不…...

编程新知 2026/4/10 13:55:25