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

使用 CSS 变量更改多个元素样式

news 2025/9/6 20:36:41

使用 CSS 变量更改多个元素样式

var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
custom-property-name 是必需的, 自定义属性的名称，必需以 – 开头。
value 可选。备用值，在属性不存在的时候使用。

var(custom-property-name, value):root {--main-bg-color: coral;--main-txt-color: blue;--main-padding: 15px;
}#div1 {background-color: var(--main-bg-color);color: var(--main-txt-color);padding: var(--main-padding);
}#div2 {background-color: var(--main-bg-color);color: var(--main-txt-color);padding: var(--main-padding);
}

创建一个自定义的 CSS 变量

创建一个 CSS 变量，只需要在变量名前添加两个破折号，并为其赋值。
这样会创建一个–penguin-skin变量并赋值为gray（灰色）。
其他元素可通过该变量来设置为gray（灰色）。

--penguin-skin: gray;

使用一个自定义的 CSS 变量

创建变量后，CSS 属性可以通过引用变量名来使用它的值。

background: var(--rabbit-basecolor);

变量不生效时设定默认值

当变量因为某些原因导致变量不生效, 可以设置一个备用值。
比如: 有些人正在使用着不支持 CSS 变量的旧浏览器，或者，设备不支持你设置的变量值。

background: var(--penguin-skin, black);

一只会动的兔子

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Easter Rabbit</title>
<style>
html {width: 100%;height: 100%;
}body {width: 100%;height: 100%;background: #E2B29F;display: flex;justify-content: center;align-items: center;
}.rabbit {--rabbit-basecolor: gray;--rabbit-ear-shadow: pink;--rabbit-skicolor:white;position: relative;
}.rabbit .rabbit__body {width: 4em;height: 5.6em;/*在这行以下修改代码*/background: var(--rabbit-skincolor, whitesmoke);border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;-webkit-transform: rotate(-40deg);transform: rotate(-40deg);box-shadow: inset -2.3em -2.7em 0 0 var(--rabbit-basecolor);
}.rabbit .rabbit__head {position: absolute;width: 4em;height: 4.6em;top: -2.5em;left: -2em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;-webkit-transform: rotate(-120deg);transform: rotate(-120deg);overflow: hidden;
}.rabbit .rabbit__head:before {content: "";position: absolute;width: 0.65em;height: 0.5em;top: -0.1em;left: 1.8em;background: #F97996;border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;-webkit-transform: rotate(130deg);transform: rotate(130deg);
}.rabbit .rabbit__head:after {content: "";position: absolute;width: 1em;height: 1em;top: 1.5em;left: 1.6em;background: #F4F4F4;border-radius: 50%;box-shadow: inset 0.1em 0.15em 0 0.37em #3D261C;
}.rabbit .rabbit__ear {position: absolute;border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;
}.rabbit .rabbit__ear--left {width: 2.2em;height: 4.7em;top: -5.7em;left: -0.2em;background: var(--rabbit-ear-shadow, #F3E3DE);-webkit-transform: rotate(40deg);transform: rotate(40deg);box-shadow: inset 0.3em -0.4em 0 -0.1em var(--rabbit-basecolor);-webkit-animation: ear-left 5s infinite ease-out;animation: ear-left 5s infinite ease-out;
}.rabbit .rabbit__ear--right {width: 2em;height: 4.7em;top: -5.5em;left: -0.7em;background: var(--rabbit-basecolor);-webkit-transform: rotate(10deg);transform: rotate(10deg);-webkit-animation: ear-right 5s infinite ease-out;animation: ear-right 5s infinite ease-out;
}.rabbit .rabbit__leg {position: absolute;
}.rabbit .rabbit__leg--one {width: 0.8em;height: 3em;top: 2.3em;left: 0.2em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;-webkit-transform: rotate(15deg);transform: rotate(15deg);
}.rabbit .rabbit__leg--one:before {content: "";position: absolute;width: 0.8em;height: 0.5em;top: 2.6em;left: -0.2em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;-webkit-transform: rotate(-10deg);transform: rotate(-10deg);
}.rabbit .rabbit__leg--three {width: 0.9em;height: 3em;top: 2.4em;left: 0.7em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;-webkit-transform: rotate(10deg);transform: rotate(10deg);
}.rabbit .rabbit__leg--three:before {content: "";position: absolute;width: 0.8em;height: 0.5em;top: 2.6em;left: -0.2em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;-webkit-transform: rotate(-10deg);transform: rotate(-10deg);
}.rabbit .rabbit__leg--two {width: 2.6em;height: 3.6em;top: 1.7em;left: 1.6em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;-webkit-transform: rotate(10deg);transform: rotate(10deg);
}.rabbit .rabbit__leg--two:before {content: "";position: absolute;width: 1.6em;height: 0.8em;top: 3.05em;left: 0em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;-webkit-transform: rotate(-10deg);transform: rotate(-10deg);
}.rabbit .rabbit__leg--four {width: 2.6em;height: 3.6em;top: 1.8em;left: 2.1em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;-webkit-transform-origin: 50% 0%;transform-origin: 50% 0%;-webkit-transform: rotate(10deg);transform: rotate(10deg);
}.rabbit .rabbit__leg--four:before {content: "";position: absolute;width: 1.6em;height: 0.8em;top: 3.05em;left: 0em;background: var(--rabbit-basecolor);border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;-webkit-transform: rotate(-10deg);transform: rotate(-10deg);
}.rabbit .rabbit__tail {position: absolute;width: 0.9em;height: 0.9em;top: 3.7em;left: 4em;background: var(--rabbit-basecolor);-webkit-transform: rotate(25deg);transform: rotate(25deg);
}.rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {content: "";position: absolute;width: 100%;height: 100%;background: var(--rabbit-basecolor);border-radius: 50%;
}.rabbit .rabbit__tail:before {top: 0;left: -50%;
}.rabbit .rabbit__tail:after {top: 50%;left: 0;
}@-webkit-keyframes ear-left {0%, 20%, 100% {-webkit-transform: rotate(40deg);transform: rotate(40deg);}10%, 30%, 80% {-webkit-transform: rotate(45deg);transform: rotate(45deg);}90% {-webkit-transform: rotate(50deg);transform: rotate(50deg);}
}@keyframes ear-left {0%, 20%, 100% {-webkit-transform: rotate(40deg);transform: rotate(40deg);}10%, 30%, 80% {-webkit-transform: rotate(45deg);transform: rotate(45deg);}90% {-webkit-transform: rotate(50deg);transform: rotate(50deg);}
}@-webkit-keyframes ear-right {0%, 20%, 100% {-webkit-transform: rotate(10deg);transform: rotate(10deg);}10%, 30%, 80% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}90% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}@keyframes ear-right {0%, 20%, 100% {-webkit-transform: rotate(10deg);transform: rotate(10deg);}10%, 30%, 80% {-webkit-transform: rotate(5deg);transform: rotate(5deg);}90% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="rabbit"><div class="rabbit__leg rabbit__leg--one"></div><div class="rabbit__leg rabbit__leg--two"></div><div class="rabbit__tail"></div><div class="rabbit__body"></div><div class="rabbit__leg rabbit__leg--three"></div><div class="rabbit__leg rabbit__leg--four"></div><div class="rabbit__ear rabbit__ear--right"></div><div class="rabbit__head"></div><div class="rabbit__ear rabbit__ear--left"></div>
</div>
<!-- partial -->
</body>
</html>

在这里插入图片描述

使用 CSS 变量更改多个元素样式

使用 CSS 变量更改多个元素样式 var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。 custom-property-name 是必需的, 自定义属性的名称，必需以 – 开头。 value 可选。备用值，在属性不存在的时候使…...

编程日记 2023/5/24 19:54:45

面试题(二十五)设计模式

1. 设计模式 1.1 说一说设计模式的六大原则参考答案单一职责原则一个类，应当只有一个引起它变化的原因；即一个类应该只有一个职责。就一个类而言，应该只专注于做一件事和仅有一个引起变化的原因，这就是所谓的单一职责原则…...

编程日记 2023/5/29 4:42:47

使用红黑树模拟实现map和set

在STL的源代码中，map和set的底层原理都是红黑树。但这颗红黑树跟我们单独写的红黑树不一样，它需要改造一下： 改造红黑树节点的定义因为map和set的底层都是红黑树。而且map是拥有键值对pair<K,V>的，而set是没有键值对&a…...

编程日记 2023/5/10 5:46:20

【django项目开发】用户登录后缓存权限到redis中（十）

这里写目录标题一、权限的数据的特点二、首先settings.py文件中配置redis连接redis数据库一、权限的数据的特点需要去数据库中频繁的读和写，为了项目提高运行效率，可以把用户的权限在每次登录的时候都缓存到redis中。这样的话，权限判断的中…...

编程日记 2023/5/11 6:39:19

算法总结c++

文章目录基本概念时间复杂度空间复杂度基本结构1. 数组前缀和差分数组快慢指针(索引)左右指针（索引）盛水容器三数之和最长回文子串2. 链表双指针删除链表的倒数第 n 个结点翻转链表递归将两个升序链表合并为一个新的升序链表链表翻转3. 散列表twoSum无…...

编程日记 2023/5/13 20:31:38

Python 之 NumPy 切片索引和广播机制

文章目录一、切片和索引1. 一维数组2. 二维数组二、索引的高级操作1. 整数数组索引2. 布尔数组索引三、广播机制1. 广播机制规则2. 对于广播规则另一种简单理解一、切片和索引 ndarray 对象的内容可以通过索引或切片来访问和修改（），与 Pytho…...

编程日记 2023/5/21 17:28:44

Redis【包括Redis 的安装+本地远程连接】

Redis 一、为什么要用缓存？ 缓存定义缓存是一个高速数据交换的存储器，使用它可以快速的访问和操作数据。程序中的缓存在我们程序中，如果没有使用缓存，程序的调用流程是直接访问数据库的； 如果多个程序调用一个数…...

编程日记 2023/3/21 1:01:22

深度学习训练营_第P3周_天气识别

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍦 参考文章：Pytorch实战 | 第P3周：彩色图片识别：天气识别**🍖 原作者：K同学啊|接辅导、项目定制**␀ 本次实验有两个新增任务&…...

编程日记 2023/5/21 17:42:13

“华为杯”研究生数学建模竞赛2006年-【华为杯】C题：维修线性流量阀时的内筒设计问题（附获奖论文及matlab代码）

赛题描述油田采油用的油井都是先用钻机钻几千米深的孔后，再利用固井机向四周的孔壁喷射水泥砂浆得到水泥井管后形成的。固井机上用来控制砂浆流量的阀是影响水泥井管质量的关键部件，但也会因磨损而损坏。目前我国还不能生产完整的阀体，固井机仍依赖进口。由于损坏的内筒已…...

编程日记 2023/5/26 10:27:42

数据结构：带环单链表基础OJ练习笔记(leetcode142. 环形链表 II)(leetcode三题大串烧)

目录一.前言二.leetcode160. 相交链表 1.问题描述 2.问题分析与求解三.leetcode141. 环形链表 1.问题描述 2.代码思路 3.证明分析下一题会用到的重要小结论： 四.leetcode142. 环形链表 II 1.问题描述 2.问题分析与求解 Judgecycle接口&#xf…...

编程日记 2023/5/29 4:45:24

数模美赛如何找数据 | 2023年美赛数学建模必备数据库

2023美赛资料分享/思路答疑群：322297051 欧美相关统计数据（一般美赛这里比较多） 1、http://www.census.gov/ 美国统计局（统计调查局或普查局）官方网站 The Census Bureau Web Site provides on-line access to our …...

编程日记 2023/4/26 5:30:29

SSTI漏洞原理及渗透测试

模板引擎（Web开发中） 是为了使用户界面和业务数据（内容）分离而产生的，它可以生成特定格式的文档， 利用模板引擎来生成前端的HTML代码，模板引擎会提供一套生成HTML代码的程序，之后…...

编程日记 2023/5/21 17:48:40

【算法基础】高精度除法

👦个人主页：Weraphael ✍🏻作者简介：目前是C语言算法学习者 ✈️专栏：【C/C】算法 🐋 希望大家多多支持，咱一起进步！😁 如果文章对你有帮助的话欢迎评论&#x1f4ac…...

编程日记 2023/5/9 10:52:18

optimizer.zero_grad(), loss.backward(), optimizer.step()的理解及使用

optimizer.zero_grad，loss.backward，optimizer.step用法介绍optimizer.zero_grad()：loss.backward()：optimizer.step()：用法介绍这三个函数的作用是将梯度归零（optimizer.zero_grad()）&#x…...

编程日记 2023/5/27 13:35:25

融资、量产和一栈式布局，这家Tier 1如此备战高阶智驾决赛圈

作者 | Bruce 编辑 | 于婷从早期的ADAS，到高速/城市NOA，智能驾驶的竞争正逐渐升级，这对于车企和供应商的核心技术和产品布局都是一个重要的考验。部分智驾供应商已经在囤积粮草，响应变化。 2023刚一开年，智能驾驶领域…...

编程日记 2023/5/6 2:02:23

centos7.8安装oralce11g

文章目录环境安装文件准备添加用户操作系统环境配置解压安装问题解决创建用户远程连接为了熟悉rman备份操作，参照大神的博客在centos中安装了一套oracle11g，将安装步骤记录如下环境安装文件准备这里准备一台centos7.8 虚拟机配置ip 192.168.18.100 主…...

编程日记 2023/5/8 7:20:28

【蓝桥杯集训·每日一题】AcWing 3956. 截断数组

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴一维前缀和一、题目 1、原题链接 3956. 截断数组 2、题目描述给定一个长度为 n 的数组 a1,a2,…,an。现在，要将该数组从中间截断，得到三个非空子…...

编程日记 2023/5/22 15:18:26

万丈高楼平地起：Linux常用命令

目录系统管理命令 man命令 ls命令 cd命令 useradd命令 passwd命令 free命令 whoami命令 ps命令 date命令 pwd命令 shutdown命令文件目录管理命令 touch命令 cat命令 mkdir命令 rm命令 cp命令 mv命令 find命令 more指令 less指令 head指令 tail指令 …...

编程日记 2023/5/14 6:05:58

Linux（Linux的连接使用）

连接Linux我们一般使用CRT或者Xshell工具进行连接使用。如CRT使用SSH的方式输出主机，账户，密码那些就可以连接上了。 Linux系统是一个文件型操作系统，有一句话说Linux的一切皆是文件。Linux系统的启动大致有下面几个步骤 Linux系统有7个运…...

编程日记 2023/5/8 6:20:10

Unity中画2D图表（2）——用XChart包绘制散点分布图 + 一条直线方程

散点图用于显示关系。对于【相关性】 ，散点图有助于显示两个变量之间线性关系的强度。对于【回归】 ，散点图常常会添加拟合线。举例1：你可以展示【年降雨量】与【玉米亩产量】的关系举例2：你也可以分析各个【节假日】与【大…...

编程日记 2023/5/12 6:59:58

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/8/5 5:52:21

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统题目开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...

编程新知 2025/9/4 19:53:45

day52 ResNet18 CBAM

在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...

编程新知 2025/8/10 20:17:44

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/7/30 23:37:23