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

CSS背景属性之颜色渐变

news 2025/8/30 7:31:25

颜色渐变

颜色渐变其实在网页设计中并不是特别常见，

但也不可避免的会出现导航栏是渐变色这种情况或者别的不是单一颜色的情况，

例如：这样的设计解决方案并不是只可以使用颜色渐变，我们可以使用两个div拼接，将文字放置两个div中间，但是有颜色渐变的话，我们就不需要那么复杂的解决。

颜色渐变可以分为两种，线性渐变和径向渐变。

线性渐变

  • 有过渡色渐变：

  background：linear-gradient( red , yellow , green );
  红色 ，黄色 ，绿色三色在0-100之间依照顺序有过渡的变化
  background：linear-gradient(red 0%,yellow 20%,yellow 100%);
  0为红色，0-50为红色到黄色渐变， 100黄色
这两者实现的效果如下图：

  • 无过渡色渐变：

  background：linear-gradient(red 0%,red 50%,yellow 50%,yellow 100%);
  0-50%都为红色，50-100都为黄色
  简写为：background：linear-gradient(red 50%,yellow 50%);
  使用无过渡渐变实现我们开始所说的效果

<style>
.nav{width: 150px;height: 100px;background:linear-gradient(#99d9ea 50%,#00a2e8 50%);line-height: 98px;text-align: center;color: white;
}
<style><body><div calss="nav">首页</div>
</body>

  • 角度渐变：

  background：linear-gradient(45deg,red,yellow,green);
  效果图如下，左边是没有角度的，右边是45deg的

 

 径向渐变
括号中的颜色编写方式与线性渐变是一样的：
background：radial-gradient(red,green);
background：radial-gradient(circle,red,green);
这两个差别不会很大，前者是横向的，后者是纵向的，下面的效果图为了观察更加明显是使用的另外两个颜色：

重复渐变

重复的线性渐变：background:repeating-linear-gradient(to top,#ff0,#0f0);
重复的径向渐变：background:repeating-lradial-gradient(to right,#ff0,#0f0);

这里的 to top是默认的值，颜色渐变会从上而下由黄色到绿色有过渡渐变
下面两张效果图，前者是to right，后者是to left

background:repeating-linear-gradient(to left,#ff0,#0f0);
background:repeating-linear-gradient(to right,#ff0,#0f0);

相关文章：

CSS背景属性之颜色渐变

颜色渐变 颜色渐变其实在网页设计中并不是特别常见&#xff0c; 但也不可避免的会出现导航栏是渐变色这种情况或者别的不是单一颜色的情况&#xff0c; 例如&#xff1a;这样的设计解决方案并不是只可以使用颜色渐变&#xff0c;我们可以使用两个div拼接&#xff0c;将文字放…...

编程日记 2023/3/1 18:41:27

IPv4地址细讲

文章目录一、IPv4地址简介二、IPv4地址的表示方法点分十进制记法三、IP地址的分类四、特殊IPv4地址&#xff1a;全 “0” 和全 “1”五、常用的三类IP地址使用范围六、五类IP地址的范围一、IPv4地址简介 IPv4地址分5类&#xff0c;每一类地址都由固定长度的字段组成&#xff1…...

编程日记 2023/3/1 18:40:18

sql语句中exists用法详解

文章目录一、语法说明exists&#xff1a;not exists&#xff1a;二、常用示例说明1.查询a表在b表中存在数据2.查询a表在b表中不存在数据3.查询时间最新记录4.exists替代distinct剔除重复数据总结一、语法说明 exists&#xff1a; 括号内子查询sql语句返回结果不为空&#xff…...

编程日记 2023/3/1 18:39:12

思迅软件端口不通导致软件和软锁报错的问题

一、端口不通导致软件和软锁报错的问题 问题说明&#xff1a;打开软件提示到&#xff1a;xxx.xxx.xxx.xxx失败&#xff01; 处理步骤1&#xff1a; 假设软锁服务器IP为192.168.0.1&#xff0c;分别在服务器本机和客户端电脑测试软锁服务: 在服务器的浏览器中访问地址: http:/…...

编程日记 2023/3/1 18:38:04

Docker之路（7.DockerFile文件编写、DockerFile 指令解释、CMD与ENTRYPOINT的区别）

1.DockerFile介绍 dockerfile 是用来构建docker镜像的文件&#xff01;命令参数脚本&#xff01; 构建步骤&#xff1a; 编写一个dockerfile文件docker build构建成为一个镜像docker run 运行镜像docker push发布镜像&#xff08;DockerHub、阿里云镜像仓库&#xff09; 2.Dock…...

编程日记 2023/3/1 18:36:59

[软件测试]如何使用Eclipse导入项目并打开

&#x1f9d1;‍&#x1f393;个人介绍&#xff1a;大二软件生&#xff0c;现学JAVA、Linux、MySQL、算法 &#x1f4bb;博客主页&#xff1a;渡过晚枫渡过晚枫 &#x1f453;系列专栏&#xff1a;[编程神域 C语言]&#xff0c;[java/初学者]&#xff0c;[蓝桥杯] &#x1f4d…...

编程日记 2023/3/1 18:35:55

emplace_back与push_back异同

vector的emplace_back与push_back 文章目录vector的emplace_back与push_back前言1.区别总览2.push_back支持右值引用不支持传入多个构造参数总是会进行拷贝构造3.emplace_backemplace_back可以接受多个构造参数支持原地构造前言 在vector中&#xff0c;通过push_back与emplace_…...

编程日记 2023/3/1 18:33:42

【C语言航路】第十五站：程序环境和预处理

目录 一、程序的翻译环境和执行环境 二、编译和链接 1.翻译环境 2.编译本身也分为几个阶段 3.运行环境 三、预处理 1.预定义符号 2.#define 1.#define定义标识符 2.#define定义宏 3.#define 替换规则 4.#和## 5.带副作用的宏参数 6.宏和函数的对比 7.命名约定 …...

编程日记 2023/3/1 18:32:37

Vue3 - 获取 Proxy 对象代理中包裹的 “真实数据“，解决对象或数组打印后是 Proxy 对象无法拿到原始数据的问题（提供 2 种详细解决方案）

前言 在 Vue3 中很多数据都被 Proxy 代理对象 “包裹”（无法拿到其真正的原始数据），另外就是请求回来的数据，例如通过 res.data.data 拿到了一个数组对象格式的数据。但是这个数据被 Proxy 包裹，你根本拿不到值无法进行处理。 本文实现了 Vue3 取到被 proxy 对象包裹的原始…...

编程日记 2023/3/1 18:31:29

ESP32设备驱动-ML8511紫外线传感器驱动

ML8511紫外线传感器驱动 1、ML8511介绍 ML8511 是一款紫外线传感器，适用于室内或室外获取紫外线强度。 ML8511 配备了一个内部放大器，可根据紫外线强度将光电流转换为电压。 这种独特的功能提供了与 ADC 等外部电路的简单接口。 在掉电模式下，典型的待机电流为 0.1 μ \mu…...

编程日记 2023/3/1 18:30:24

SC12B触摸感应芯片评测方案（1）

MM32F0160SC12B Touch Application Evaluation 文章目录MM32F0160SC12B Touch Application EvaluationIntroduction & RequirementHardwareSC12B & SC12B Sample Demo boardMini-F0160 boardSoftwareMCU Software - MM32F0160PC Tool - FreeMASTERSummaryIntroduction …...

编程日记 2023/3/1 18:29:18

企业如何实现精细化人员管理？五大业务场景值得关注

近年来&#xff0c;随着大数据、人工智能和云计算等信息技术不断升级与渗透&#xff0c;处在数字化变革的劳动力密集型企业希望利用更加智能化的劳动力管理软件&#xff0c;帮助企业实现规范化的管理。 面对企业劳动力管理理念的变化&#xff0c;以及数字化转型的发展渗透&…...

编程日记 2023/3/1 18:28:10

C/C++每日一练(20230301)

目录 1. 冒泡排序法排序 ★ 2. 有效的数独 ★★ 3. 不同的二叉搜索树 II ★★ 附录 二叉搜索树 1. 冒泡排序法排序 输入n&#xff08;1≤n≤10&#xff09;个整数&#xff0c;用冒泡排序法对其从小到大排序&#xff0c;共进行n-1趟&#xff0c;要求输出每一趟的排序情…...

编程日记 2023/3/1 18:27:03

Vue项目中components组件的使用笔记

目录 前言 一、components和component的区别&#xff1f; 二、components使用的步骤 1.创建组件vue文件 2.引入组件 3.注册组件 4.应用组件 总结 前言 本文章&#xff0c;只是初步了解记录components的使用步骤。 一、components和component的区别&#xff1f; compo…...

编程日记 2023/3/1 18:25:56

2023软件测试行情不行了？

一、2023年软件测试行业的现状 2020年开年&#xff0c;一不小心&#xff0c;【新冠】黑天鹅从头上飘过&#xff0c;持续影响全国乃至全球的经济&#xff0c;软件行业公司也迎来了不少的冲击&#xff0c;那么一个值得打算入行软件测试行业&#xff0c;或者已经在软件测试行业耕耘…...

编程日记 2023/3/1 18:24:46

【java web篇】数据库连接池Driud的使用

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…...

编程日记 2023/3/1 18:23:42

无损音乐格式：FLAC和ALAC

前言&#xff1a;我最近在弄苹果的airplay项目&#xff0c;发现airplay2对比airplay多了音质方面的增强。AAC和MP3接触过&#xff0c;但对FLAC和ALAC完全不了解&#xff0c;整理学习资料汇总成如下信息&#xff1a; AirPlay2 在2017年推出&#xff0c;在前一代AirPlay的基础上…...

编程日记 2023/3/1 18:22:37

第十届蓝桥杯省赛——4质数（质数判断，数学函数：开方函数）

题目&#xff1a;试题 D: 质数本题总分&#xff1a;10 分【问题描述】我们知道第一个质数是 2、第二个质数是 3、第三个质数是 5……请你计算第 2019 个质数是多少&#xff1f;【答案提交】这是一道结果填空的题&#xff0c;你只需要算出结果后提交即可。本题的结果为一个整数&…...

编程日记 2023/3/1 18:21:31

MASKGROUP: HIERARCHICAL POINT GROUPING AND MASKING FOR 3D INSTANCE SEGMENTATION

ABSTRACT 本文研究了 3D 实例分割问题，该问题在机器人技术和增强现实等现实世界中具有多种应用。由于3D物体的周围环境非常复杂，不同物体的分离非常困难。为了解决这个具有挑战性的问题，我们提出了一个新的框架来对 3D 实例进行分组和优化。在实践中，我们首先为每个点学习…...

编程日记 2023/3/1 18:20:25

为什么地图可视化炙手可热？

我们在谈到数据可视化的时候&#xff0c;可能第一反应就是中间有一个地图样式的大屏图。但有没有想过&#xff0c;为什么大多数的可视化大屏中间都是一张地图的样子&#xff1f;这张地图样式的模块究竟是什么呢&#xff1f;它又是怎么做出来的&#xff1f; 其实这张地图样式的…...

编程日记 2023/3/1 18:19:19

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/8/29 16:30:48

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/8/29 18:17:15

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/8/22 4:15:28

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/8/19 6:29:21

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/8/27 14:36:24

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/7/29 21:54:16

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/7/6 22:10:07

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/6/15 22:59:29

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/8/27 16:16:13