CSS 合法颜色值
CSS 颜色
CSS 中的颜色可以通过以下方法指定：
- 十六进制颜色
- 带透明度的十六进制颜色
- RGB 颜色
- RGBA 颜色
- HSL 颜色
- HSLA 颜色
- 预定义/跨浏览器的颜色名称
- 使用
currentcolor关键字
十六进制颜色
用 #RRGGBB 规定十六进制颜色，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分（分量）。所有值必须在 00 到 FF 之间。
例如，＃0000ff 值呈现为蓝色，因为蓝色分量设置为最高值（ff），其他分量设置为 00。
实例
定义不同的 HEX 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
</style>
</head>
<body><h1>HEX 颜色</h1>
<p>用#RRGGBB指定十六进制颜色，其中RR（红色），GG（绿色）和BB（蓝色）十六进制整数指定颜色的组成部分。所有值必须在00到FF之间。</p><p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">黄色</p>
<p id="p5">樱桃色</p></body>
</html>
带透明度的十六进制颜色
用 #RRGGBB 规定十六进制颜色。如需增加透明度，请在 00 和 FF 之间添加两个额外的数字。
实例
定义带透明度的 HEX 颜色：
RGB 颜色
RGB 颜色值由 rgb() 函数规定，语法如下：
rgb(red, green, blue)每个参数（red, green, blue）定义颜色的强度，可以是 0 到 255 之间的整数或百分比值（从 0％ 到 100％）。
例如，值 rgb(0,0,255) 呈现为蓝色，因为 blue 参数设置为其最高值（255），其他参数设置为 0。
此外，以下值定义相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。
实例
定义不同的 RGB 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);}
#p2 {background-color:rgb(0,255,0);}
#p3 {background-color:rgb(0,0,255);}
#p4 {background-color:rgb(192,192,192);}
#p5 {background-color:rgb(255,255,0);}
#p6 {background-color:rgb(255,0,255);}
</style>
</head>
<body><h1>RGB 颜色</h1>
<p>RGB 颜色值通过 rgb() 函数来规定：rgb(red, green, blue)</p>
<p>每个参数（红色，绿色和蓝色）定义颜色的强度，并且可以是 0 到 255 之间的整数或百分比值（从 0％ 到 100％）。</p><p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">灰色</p>
<p id="p5">黄色</p>
<p id="p6">樱桃色</p></body>
</html>
RGBA 颜色
RGBA 颜色值是 RGB 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。
RGBA 颜色通过 rgba() 函数规定，语法如下：
rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
实例
定义带有不透明度的不同 RGB 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body><h1>带不透明度的 RGB 颜色</h1>
<p>RGBA 颜色值是带有 Alpha 通道的 RGB 颜色值的扩展 - 它指定对象的不透明度。</p><p id="p1">红色</p>
<p id="p2">绿色</p>
<p id="p3">蓝色</p>
<p id="p4">灰色</p>
<p id="p5">黄色</p>
<p id="p6">樱桃色</p></body>
</html>
HSL 颜色
HSL 指的是色相（hue）、饱和度（saturation）和亮度（lightness）- 代表颜色的圆柱坐标表示。
使用 hsl() 函数指定 HSL 颜色值，该函数的语法如下：
hsl(hue, saturation, lightness)
色相是色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。
饱和度是一个百分比值； 0％ 表示灰色阴影，而 100％ 是全彩色。
亮度也是一个百分比； 0％ 是黑色，100％ 是白色。
实例
定义不同的 HSL 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
</style>
</head>
<body><h1>HSL 颜色</h1>
<p>HSL 代表色相\饱和度和明度 - 表示颜色的圆柱坐标表示。</p>
<p>HSL 颜色值通过 hsl() 函数来指定 ：hsl(hue, saturation, lightness)</p>
<p>色相（Hue）是色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。饱和度（Saturation）是一个百分比值； 0％ 表示灰色阴影，而 100％ 是全彩色。亮度（Lightness）也是一个百分比； 0％ 是黑色，100％ 是白色。</p><p id="p1">绿色</p>
<p id="p2">浅绿色</p>
<p id="p3">深绿色</p>
<p id="p4">柔绿色</p>
<p id="p5">紫色</p>
<p id="p6">淡紫色</p></body>
</html>
HSLA 颜色
HSLA 颜色值是 HSL 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。
HSLA 颜色值由 hsla() 函数指定，该函数的语法如下：
hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
实例
定义带有不透明度的不同 HSL 颜色：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body><h1>带不透明度的 HSL 颜色</h1>
<p>HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了对象的不透明度。</p><p id="p1">绿色</p>
<p id="p2">浅绿色</p>
<p id="p3">深绿色</p>
<p id="p4">柔绿色</p>
<p id="p5">紫色</p>
<p id="p6">淡紫色</p></body>
</html>
预定义/跨浏览器的颜色名称
HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。
例如：blue、red、coral、brown 等：
实例
定义不同的颜色名：
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
</style>
</head>
<body><h1>预定义的颜色名称</h1>
<p>HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。这些只是其中的一些：</p><p id="p1">蓝色</p>
<p id="p2">红色</p>
<p id="p3">珊瑚色</p>
<p id="p4">棕色</p></body>
</html>
currentcolor 关键字
currentcolor 关键字引用元素的 color 属性值。
实例
以下 <div> 元素的边框颜色将为蓝色，因为 <div> 元素的文本颜色为蓝色：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {color: blue;border: 10px solid currentcolor;
}
</style>
</head>
<body><h1>currentcolor 关键字</h1>
<p>currentcolor 关键字引用元素的 color 属性的值。</p>
<p>下面的 div 元素的边框颜色将为蓝色，因为 div 元素的文本颜色为蓝色：</p><div id="myDIV">
这个 div 元素有蓝色文本颜色和蓝色边框。
</div></body>
</html>
相关文章：
CSS 合法颜色值
CSS 颜色 CSS 中的颜色可以通过以下方法指定： 十六进制颜色带透明度的十六进制颜色RGB 颜色RGBA 颜色HSL 颜色HSLA 颜色预定义/跨浏览器的颜色名称使用 currentcolor 关键字 十六进制颜色 用 #RRGGBB 规定十六进制颜色，其中 RR（红色&…...
Redis - General - 未授权访问漏洞（用户配置问题）
0x01：产品简介 Redis（Remote Dictionary Service，远程数据服务），是一款开源的基于内存的键值对存储系统，其主要被用作高性能缓存服务器使用（比如作为消息中间件和用于 Session 共享）…...
解决 WSL 2 中 Ubuntu 22.04 安装 Docker 后无法启动的问题
问题场景 安装Docker后，执行sudo service docker start启动Docker，提示启动成功 rootDev:~# sudo service docker start * Starting Docker: docker [ OK ]执行su…...
Conda的一些常用命令
以下是Conda的一些常用命令： pip freeze > requirements.txt pip install -r requirements.txt 基本信息查看类 查看conda版本： conda -V 或 conda --version 可以查看当前安装的conda版本。 查看conda帮助信息： conda -h 或 conda --he…...
AI 大爆发时代，音视频未来路在何方？
AI 大模型突然大火了 回顾2024年，计算机领域最大的变革应该就是大模型进一步火爆了。回顾下大模型的发展历程： 萌芽期：（1950-2005） 1956年：计算机专家约翰麦卡锡首次提出“人工智能”概念，标志…...
Invicti-Professional-V25.1
01 更新介绍 此更新包括对内部代理的更改。内部扫描代理的当前版本为 25.1.0。内部身份验证验证程序代理的当前版本为 25.1.0。#新功能现在，单击扫描摘要屏幕中的预设扫描图标会将您重定向到具有过滤视图的 “最近扫描” 页面，从而改进导航和对相关扫描…...
【版图设计】2025年 最新 Cadence Virtuoso IC617 虚拟机环境配置全过程 集成电路版图设计环境配置
一、Cadence Virtuoso IC617 是什么？ Cadence Virtuoso 是一个电子设计自动化（EDA）工具，主要用于集成电路（IC）的设计和仿真，尤其是在模拟、混合信号和射频（RF）电路设计领…...
Python基本概念与实践
Python语言，总给我一种“嗯？还能这么玩儿？”的感觉 Python像一个二三十岁的年轻人，自由、年轻、又灵活 欢迎一起进入Python的世界~ 本人工作中经常使用Python，针对一些常用的语法概念进行持续记录。 目录 一、类与常…...
# [Unity] 【游戏开发】获取物体和组件的脚本方法
在Unity开发中，获取游戏物体（GameObject）及其组件（Component）是脚本编程的核心技能。本文将详细介绍如何在脚本中访问游戏物体及其组件，深入讲解常用的获取方法及优化策略，以帮助开发者高效编写Unity脚本。 1. 理解游戏物体与组件的关系 游戏物体（GameObject）：Unity场…...
10 为什么系统需要引入分布式、微服务架构
java技术的发展 在java开始流行起来之后，主要服务于企业家应用，例如ERP,CRM等等，这些项目是为企业内部员工使用，我们的思维是怎么用设计模式，如何封装代码。让开发人员关注到业务上去，系统也就那么几十几百…...
大数据系列之：上传图片到cos、cos
大数据系列之：上传图片到cos、cos 安装python cos sdk上传图片到cos高级上传接口分页列举桶内对象cos桶之间复制cos桶之间复制图片数据 安装python cos sdk pip install -U cos-python-sdk-v5上传图片到cos # -*- codingutf-8 from qcloud_cos import CosConfig fr…...
wsl 使用 docker
直接在 wsl 安装 docker , 有可能会失败，可以通过在 windows 安装 Docker Desktop，然后连接 wsl 进行解决 注意： 1. 需要先安装 wsl 2. 使用时要先启动 docker Desktop, 才能在 wsl 中使用 下载： Docker: Accelerated Containe…...
归并延拓：LeetCode归并排序逆序对问题
前言 欢迎来到我的算法探索博客，在这里，我将通过解析精选的LeetCode题目，与您分享深刻的解题思路、多元化的解决方案以及宝贵的实战经验，旨在帮助每一位读者提升编程技能，领略算法之美。 👉更多高频有趣Lee…...
51.WPF应用加图标指南 C#例子 WPF例子
完整步骤： 先使用文心一言生成一个图标如左边使用Windows图片编辑器编辑，去除背景使用正方形，放大图片使图标铺满图片使用格式工程转换为ico格式，分辨率为最大 在资源管理器中右键项目添加ico类型图片到项目里图片属性设置为始终…...
Springboot 注解缓存使用教程
Spring Boot Cache 注解使用教程 Spring Boot 提供了强大的缓存抽象，开发者可以通过注解快速实现缓存功能，从而提高系统性能。本教程将全面介绍 Spring Boot 提供的缓存相关注解及其作用，并结合示例讲解实际应用。 1. 常用缓存注解概览 Spring Boot 缓存提供以下核心注解…...
Python爬虫：从入门到实践
Python爬虫学习资料 Python爬虫学习资料 Python爬虫学习资料 在当今数字化信息爆炸的时代，数据已成为企业和个人发展的重要资产。Python爬虫作为一种高效获取网络数据的工具，正逐渐被广大开发者所熟知和应用。无论是市场调研、学术研究，还是…...
)
删除字符串中的所有相邻重复项(力扣1047)
这题也是属于栈的经典应用。为什么这样说呢？因为也是让我们删除相邻项。注意这里相邻项的理解，并不仅仅是说最开始的字符串相邻的项。在我们删除了某些相邻项后，会改变字符串，导致原本不相邻的字符变成相邻的，这同样属…...
MYSQL对数据的增删改查
DML 语句 对数据 进行 增、删、改 操作 插入 命令-- 插入值的个数 必须和 字段定义的个数相同 且 顺序 一致 insert into <tableName> values (val ...) ; /* 不推荐使用 */insert into <tableName>(col1 , col2 , ...) values(val1, val2 , ...) ;-- 批量插…...
前端——Html+CSS
目录 CSS引入方式 颜色表达方式 CSS选择器 去掉超链接的下划线 路径表示 行高和首行缩进 常见标签 布局标签 flex布局 表单标签 表单项标签 改变鼠标指针的样式 表格标签 div{ box-sizing: border-box; } CSS引入方式 具体有3种引入方式，语法如下表格所…...
Linux（DISK：raid5、LVM逻辑卷）
赛题拓扑： 题目： DISK 添加４块大小均为10G的虚拟磁盘，配置raid-5磁盘。创建LVM命名为/dev/vg01/lv01，大小为20G，格式化为ext4，挂在到本地目录/webdata，在分区内建立测试空文件disk.txt。[root@storagesrv ~]# yum install mdadm -y [root@storagesrv ~]# mdadm -C -n …...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...
TDengine 快速体验（Docker 镜像方式）
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
C# SqlSugar：依赖注入与仓储模式实践
C# SqlSugar：依赖注入与仓储模式实践 在 C# 的应用开发中，数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护，许多开发者会选择成熟的 ORM（对象关系映射）框架，SqlSugar 就是其中备受…...
Linux 内存管理实战精讲：核心原理与面试常考点全解析
Linux 内存管理实战精讲：核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用，还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...
《Docker》架构
文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器，docker，镜像，k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...
【iOS】 Block再学习
iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...