拾忆🍂

外观

CSS

约 6124 字大约 20 分钟

2025-11-20

深色模式适配

自定义

html

<html>
  <!-- 省略一些标签 -->
  <body>
    <!-- 深色模式切换开关 -->
    <button id="themeToggle">
        <span id="themeIcon">🌙</span>
    </button>
    <!-- 省略一些元素 -->
  </body>
</html>

css

/** 匹配文档树的根元素 */
:root {
  --bg-color: #f0f8ff;
  --text-color: #333;
}

/** 给要适配深色模式的元素动态添加上这个`class`，因为`css`的就近选择原理，所以这里面的属性生效 */
/** 也或者[data-theme='dark'] { 颜色变量... } 意思完全匹配带有这个属性键值对的元素 */
.dark-mode {
  --bg-color: #121212;
  --text-color: #f0f0f0;
}


body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.5s ease, color 0.5s ease;
}

javascript

/** 深色模式切换 */
const themeToggle = document.getElementById('themeToggle');
const themeIcon = document.getElementById('themeIcon');
const body = document.body;

// 检查系统主题
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');

// 检查本地存储中的主题设置
const currentTheme = localStorage.getItem('theme');

// 根据系统偏好或本地存储设置初始主题
if (currentTheme === 'dark' || (!currentTheme && prefersDarkScheme.matches)) {
  // 或者 body.setAttribute('data-theme', 'dark')
  body.classList.add('dark-mode');
  themeIcon.textContent = '☀️';
} else {
  // 或者 body.setAttribute('data-theme', 'light')
  body.classList.remove('dark-mode');
  themeIcon.textContent = '🌙';
}

// 切换主题
themeToggle.addEventListener('click', () => {
  if (body.classList.contains('dark-mode')) {
    body.classList.remove('dark-mode');
    localStorage.setItem('theme', 'light');
    themeIcon.textContent = '🌙';
  } else {
    body.classList.add('dark-mode');
    localStorage.setItem('theme', 'dark');
    themeIcon.textContent = '☀️';
  }
});

跟随系统

/* 定义默认变量（浅色模式） */
/* 选择器指向文档根元素（HTML文档就是 <html> 元素） */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #007bff;
  --border-color: #dee2e6;
}

/* 深色模式覆盖，重新定义相同的变量名 */
/* 媒体查询，检测系统是否启用深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
    --primary-color: #4dabf7;
    --border-color: #495057;
  }
}

/* 使用变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: system-ui;
}

CSS 属性

优先级及兼容选择：如果某个属性 已经进入W3C标准：

  • 浏览器会 优先使用无前缀的标准属性
  • 带前缀的版本主要作为 历史兼容存在

厂商前缀CSS属性

  • -webkit-* (Webkit内核：Chrome、Safari)
  • -moz-* (Firefox)
  • -ms-* (IE、Edge旧版)
  • -o-* (Opera旧版)

transition

重要

被动触发：属性变化、伪类触发（ :hover 、表单状态 等）、class 切换、媒体查询。

在 CSS 的 transition 属性中，各个过渡的属性值顺序是有意义的，但只需要确保每组值（属性名、持续时间、延迟时间等）的内部顺序正确即可。具体规则如下：

1. 每组过渡值的内部顺序固定

每组过渡效果需要按照以下顺序指定（必要值用粗体标出）：

  1. 过渡属性名（如 transform、background-color）
  2. 持续时间（如 2s、500ms）
  3. 延迟时间（可选，默认 0s）
  4. 缓动函数（可选，默认 ease）

例如：

/* 正确写法：持续时间在前，延迟时间在后 */
transition: transform 2s 0.5s ease-in-out;

/* 错误写法：持续时间和延迟时间顺序颠倒 */
transition: transform 0.5s 2s ease-in-out; /* 会导致延迟2秒，持续0.5秒 */

2. 多组过渡值之间用逗号分隔

当为多个属性指定过渡时，每组值之间用逗号分隔，各组值的顺序可以任意排列。例如：

/* 正确：transform组在前，background-color组在后 */
transition: transform 2s ease-in-out, background-color 1s linear;

/* 等效：交换两组的顺序 */
transition: background-color 1s linear, transform 2s ease-in-out;

但每组内部的值仍需遵循 属性名 → 持续时间 → 延迟时间 → 缓动函数 的顺序。

3. 简写语法的限制

如果使用简写语法（如 transition: all 2s），所有属性将共用相同的持续时间、延迟时间和缓动函数。此时无法为不同属性指定不同的参数。

例如：

/* 所有属性共用2秒持续时间和ease缓动 */
transition: all 2s;

/* 等价于 */
transition: 
  width 2s ease, 
  height 2s ease, 
  background-color 2s ease, 
  transform 2s ease;

示例对比

以下两个写法完全等效（各组值顺序不同，但内部结构正确）：

/* 写法1：transform组在前 */
transition: 
  transform 2s ease-in-out, 
  background-color 1s linear, 
  opacity 0.5s 0.2s cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* 写法2：opacity组在前 */
transition: 
  opacity 0.5s 0.2s cubic-bezier(0.1, 0.7, 1.0, 0.1), 
  background-color 1s linear, 
  transform 2s ease-in-out;

总结

  • 每组内部的参数顺序必须固定（属性名 → 持续时间 → 延迟时间 → 缓动函数）。
  • 多组之间的顺序可以任意调整，但建议按属性的重要性或执行顺序排列，提高可读性。

animation

重要

主动触发：属性变化、伪类触发（ :hover 、表单状态 等）、class 切换、媒体查询、自动执行（页面加载）、动画状态控制（ animation-play-state ）。

还可进行 事件监听：animationstart、animationend、animationiteration

提示

animation 功能上是 transition 的超集，但 transition 在简单场景下写起来更方便。

在 CSS 中，animation 是一个简写属性，用于一次性设置动画的多个参数。以下是其完整的参数顺序、可用值及详细说明：

参数顺序与含义

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  1. name（必选） 动画名称，对应 @keyframes 定义的动画序列名称。

  2. duration（必选） 动画周期时长，单位为秒（s）或毫秒（ms），如 2s 或 500ms。

  3. timing-function（可选，默认 ease） 缓动函数，控制动画速度曲线，与 transition 相同：

    /* 常见值 */
linear | ease | ease-in | ease-out | ease-in-out
cubic-bezier(0.1, 0.7, 1.0, 0.1) /* 自定义贝塞尔曲线 */
steps(5, start) /* 阶梯函数 */

  4. delay（可选，默认 0s） 动画延迟启动时间，单位为秒（s）或毫秒（ms）。

  5. iteration-count（可选，默认 1） 动画循环次数，可指定数字或 infinite（无限循环）：

    1 | 3 | infinite

  6. direction（可选，默认 normal） 动画播放方向：

    normal | reverse | alternate | alternate-reverse

- `normal`：正向播放（默认）。
- `reverse`：反向播放。
- `alternate`：奇数次正向，偶数次反向（如 `1→2→1→2`）。
- `alternate-reverse`：奇数次反向，偶数次正向（如 `2→1→2→1`）。

  7. fill-mode（可选，默认 none） 动画执行前后的状态保持：

    none | forwards | backwards | both

- `none`：动画前后不应用关键帧样式。
- `forwards`：动画结束后保持最后一帧状态。
- `backwards`：动画开始前应用第一帧状态（受 `delay` 影响）。
- `both`：同时生效 `forwards` 和 `backwards`。

  8. play-state（可选，默认 running） 动画播放状态：

    running | paused

/* 常用于通过 JS 动态控制动画 */
.box:hover {
  animation-play-state: paused; /* 鼠标悬停时暂停 */
}

展开形式与简写对比

animation 简写等价于以下展开属性：

animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;

关键帧定义（@keyframes）

使用 @keyframes 定义动画序列，其中可包含多个时间点（from/to 或百分比）：

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 等价于 */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

示例

.box {
  animation: 
    pulse 2s ease-in-out 0.5s infinite alternate, /* 主动画 */
    fadeIn 1s forwards; /* 辅助动画 */
}

@keyframes pulse {
  0% { transform: scale(1); background: red; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); background: blue; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

注意事项

  1. 必选参数animation-name 和 animation-duration 是必需的，否则动画不会生效。

  2. 多动画支持 可通过逗号分隔多个动画，每个动画按顺序对应参数：

    animation: 
  slide 2s, /* 第一个动画 */
  fade 1s 0.5s; /* 第二个动画（延迟0.5秒） */

  3. 继承性 动画属性不会被继承，需为每个元素单独设置。

完整示例

/* 定义一个旋转并变色的动画 */
@keyframes spinAndChangeColor {
  0% { transform: rotate(0deg); background-color: red; }
  50% { transform: rotate(180deg); background-color: green; }
  100% { transform: rotate(360deg); background-color: blue; }
}

/* 应用动画 */
.element {
  animation: 
    spinAndChangeColor /* 名称 */
    3s /* 时长 */
    linear /* 匀速 */
    1s /* 延迟1秒 */
    infinite /* 无限循环 */
    alternate /* 交替方向 */
    forwards /* 保持最终状态 */;
}

和 transition 区别

特性transition（过渡）animation（动画）
触发方式被动触发：需要状态改变（如:hover、class切换、媒体查询、表单状态、伪类等）主动触发：自动执行或通过触发
控制粒度简单：只能定义开始和结束状态精细：多关键帧、循环、延迟、方向
循环播放❌ 不支持✅ 支持无限循环
中间状态❌ 只能定义起止点✅ 可定义任意中间状态
自动执行❌ 需要触发✅ 可自动开始

提示

transition 天然支持双向过渡，animation 需要手动处理。

@keyframes

在 CSS 中，@keyframes 规则用于定义 CSS 动画的关键帧（关键状态），是创建复杂动画的核心语法。以下是其完整介绍：

基础语法

@keyframes 动画名称 {
  时间点 {
    CSS属性: 值;
    /* 其他属性... */
  }
  时间点 {
    CSS属性: 值;
    /* 其他属性... */
  }
}
  • 动画名称：自定义标识符（如 slide、fadeIn）。
  • 时间点：支持 from（等价于 0%）、to（等价于 100%）或百分比（如 25%、75%）。

关键帧定义方式

  1. 使用百分比
@keyframes slide {
  0% { transform: translateX(0); opacity: 0; }
  50% { transform: translateX(50px); opacity: 0.8; }
  100% { transform: translateX(100px); opacity: 1; }
}
  1. 使用 from/to
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
  1. 省略中间状态

若仅定义首尾状态，浏览器会自动补间（插值计算）：

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

可在 @keyframes 中使用的属性

几乎所有 CSS 属性都可以在关键帧中过渡，但需满足：

  1. 属性值是数值或颜色（如 width: 100px、color: red）。
  2. 属性值可被插值（如 display: none 不可过渡，opacity: 0 可过渡）。

常见可动画属性：

  • transform、opacity、color、background-color
  • width、height、margin、padding
  • font-size、box-shadow、filter

关键帧中的特殊规则

  1. 多属性动画

可同时对多个属性设置动画：

@keyframes moveAndChange {
  0% { 
    transform: translate(0, 0); 
    background-color: red;
  }
  100% { 
    transform: translate(100px, 50px); 
    background-color: blue;
  }
}
  1. 覆盖属性

后定义的关键帧可覆盖前面的属性：

@keyframes complex {
  0% { transform: scale(1); opacity: 0; }
  50% { opacity: 0.5; } /* 保持scale(1)，仅修改opacity */
  100% { transform: scale(2); opacity: 1; }
}
  1. !important 无效

关键帧中使用 !important 会被忽略：

@keyframes invalid {
  0% { color: red !important; } /* 无效 */
}

与 animation 属性配合使用

定义关键帧后，需通过 animation 属性应用到元素：

.element {
  animation: 
    slide 			/* 对应@keyframes名称 */
    3s 				/* 持续时间 */
    ease-in-out 	/* 缓动函数 */
    infinite 		/* 无限循环 */
    alternate;	 	/* 交替播放 */
}

高级技巧

  1. 动画延迟与持续时间

不同关键帧可设置不同的延迟或持续时间：

.element1 {
  animation: slide 2s; /* 2秒完成动画 */
}

.element2 {
  animation: slide 4s 1s; /* 4秒完成，延迟1秒 */
}
  1. 多动画组合

通过逗号分隔应用多个动画：

.element {
  animation: 
    fadeIn 1s,
    slide 2s 0.5s; /* 第二个动画延迟0.5秒 */
}
  1. 反向动画

使用 animation-direction: reverse 反转关键帧顺序：

.element {
  animation: slide 2s reverse;
  /* 实际执行: 100% → 0% */
}

示例：弹跳动画

/* 定义弹跳动画 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

/* 应用到元素 */
.ball {
  animation: bounce 2s infinite;
}

浏览器兼容性

所有现代浏览器（Chrome、Firefox、Safari、Edge）均支持 @keyframes，IE10+ 也支持。

为兼容旧版浏览器，可添加浏览器前缀：

@-webkit-keyframes slide { /* Safari 4+ */
  from { -webkit-transform: translateX(0); }
  to { -webkit-transform: translateX(100px); }
}

@keyframes slide { /* 标准语法 */
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

总结

@keyframes 是 CSS 动画的基础，通过定义关键状态和时间点，配合 animation 属性可创建复杂的动画效果。合理使用百分比、多属性组合和高级参数，能实现流畅的交互动画。

滚动条

选择器

::-webkit-scrollbar // 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button // 滚动条两端的按钮
::-webkit-scrollbar-track // 外层轨道
::-webkit-scrollbar-track-piece // 内层滚动槽
::-webkit-scrollbar-thumb // 滚动的滑块
::-webkit-scrollbar-corner // 边角
::-webkit-resizer // 定义右下角拖动块的样式

美化

/* Firefox */
* {
  /* 滚动条宽度（可选值：thin/auto/none）*/
  scrollbar-width: thin; 
  /* 滚动条颜色（滑块、轨道） */
  scrollbar-color: #888 #f1f1f1;
}

/* WebKit 浏览器 */
/* 整体滚动条宽度 */
::-webkit-scrollbar {
  width: 8px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
  display: none; /* 隐藏 */
}

/* 轨道（背景）样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道颜色 */
  border-radius: 4px;
}

/* 滑块（拖动块）样式 */
::-webkit-scrollbar-thumb {
  background: #888; /* 滑块颜色 */
  border-radius: 4px;
}

/* 悬停效果 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 悬停颜色 */
}

禁用文本选中

button {
  user-select: none;
}

英文色值

CSS颜色对照表 - herry菌 - 博客园

CSS常用颜色

黑色银色灰色白色茶色红色紫色紫红
blacksilvergraywhitemaroonredpurplefuchsia
#000000#C0C0C0#808080#FFFFFF#800000#FF0000#800080#FF00FF
--------
绿色亮绿橄榄黄色深蓝蓝色青色浅绿
greenlimeoliveyellownavybluetealaqua
#008000#00FF00#808000#FFFF00#000080#0000FF#008080#00FFFF

CSS颜色代码大全

#FFFFFF#DDDDDD#AAAAAA#888888#666666#444444#000000
#FFB7DD#FF88C2#FF44AA#FF0088#C10066#A20055#8C0044
#FFCCCC#FF8888#FF3333#FF0000#CC0000#AA0000#880000
#FFC8B4#FFA488#FF7744#FF5511#E63F00#C63300#A42D00
#FFDDAA#FFBB66#FFAA33#FF8800#EE7700#CC6600#BB5500
#FFEE99#FFDD55#FFCC22#FFBB00#DDAA00#AA7700#886600
#FFFFBB#FFFF77#FFFF33#FFFF00#EEEE00#BBBB00#888800
#EEFFBB#DDFF77#CCFF33#BBFF00#99DD00#88AA00#668800
#CCFF99#BBFF66#99FF33#77FF00#66DD00#55AA00#227700
#99FF99#66FF66#33FF33#00FF00#00DD00#00AA00#008800
#BBFFEE#77FFCC#33FFAA#00FF99#00DD77#00AA55#008844
#AAFFEE#77FFEE#33FFDD#00FFCC#00DDAA#00AA88#008866
#99FFFF#66FFFF#33FFFF#00FFFF#00DDDD#00AAAA#008888
#CCEEFF#77DDFF#33CCFF#00BBFF#009FCC#0088A8#007799
#CCDDFF#99BBFF#5599FF#0066FF#0044BB#003C9D#003377
#CCCCFF#9999FF#5555FF#0000FF#0000CC#0000AA#000088
#CCBBFF#9F88FF#7744FF#5500FF#4400CC#2200AA#220088
#D1BBFF#B088FF#9955FF#7700FF#5500DD#4400B3#3A0088
#E8CCFF#D28EFF#B94FFF#9900FF#7700BB#66009D#550088
#F0BBFF#E38EFF#E93EFF#CC00FF#A500CC#7A0099#660077
#FFB3FF#FF77FF#FF3EFF#FF00FF#CC00CC#990099#770077

红色

颜色名称代码颜色
maroon#800000■
darkred#8B0000■
brown#A52A2A■
firebrick#B22222■
crimson#DC143C■
red#FF0000■

桃红~粉红

颜色名称代码颜色
mediumvioletred#C71585■
palevioletred#D87093■
deeppink#FF1493■
fuchsia(magenta)#FF00FF■
hotpink#FF69B4■
pink#FFC0CB■
lightpink#FFB6C1■
mistyrose#FFE4E1■
lavenderblush#FFF0F5■

紫

颜色名称代码颜色
indigo#4B0082■
purple#800080■
darkmagenta#8B008B■
darkorchid#9932CC■
blueviolet#8A2BE2■
darkviolet#9400D3■
slateblue#6A5ACD■
mediumpurple#9370DB■
mediumslateblue#7B68EE■
mediumorchid#BA55D3■
violet#EE82EE■
plum#DDA0DD■
thistle#D8BFD8■
lavender#E6E6FA■

褐~橘~米白

颜色名称代码颜色
saddlebrown#8B4513■
sienna#A0522D■
chocolate#D2691E■
indianred#CD5C5C■
rosybrown#BC8F8F■
lightcorol#F08080■
salmon#FA8072■
lightsalmon#FFA07A■
orangered#FF4500■
tomato#FF6347■
coral#FF7F50■
darkorange#FF8C00■
sandybrown#F4A460■
peru#CD853F■
tan#D2B48C■
burlywood#DEB887■
wheat#F5DEB3■
moccasin#FFE4B5■
navajowhite#FFDEAD■
peachpuff#FFDAB9■
bisque#FFE4C4■
antuquewhite#FAEBD7■
papayawhip#FFEFD5■
cornsilk#FFF8DC■
oldlace#FDF5E6■
linen#FAF0E6■
seashell#FFF5EE■
snow#FFFAFA■
floralwhite#FFFAF0■
ivory#FFFFF0■
mintcream#F5FFFA■

金~黄

颜色名称代码颜色
darkgoldenrod#B8860B■
goldenrod#DAA520■
gold#FFD700■
yellow#FFFF00■
darkkhaki#BDB76B■
khaki#F0E68C■
palegoldenrod#EEE8AA■
beige#F5F5DC■
lemonchiffon#FFFACD■
lightgoldenrodyellow#FAFAD2■
lightyellow#FFFFE0■

~黄绿

颜色名称代码颜色
darkslategray#2F4F4F■
darkolivegreen#556B2F■
olive#808000■
darkgreen#006400■
forestgreen#228B22■
seagreen#2E8B57■
green(teal)#008080■
lightseagreen#20B2AA■
madiumaquamarine#66CDAA■
mediumseagreen#3CB371■
darkseagreen#8FBC8F■
yellowgreen#9ACD32■
limegreen#32CD32■
lime#00FF00■
chartreuse#7FFF00■
lawngreen#7CFC00■
greenyellow#ADFF2F■
mediumspringgreen#00FA9A■
springgreen#00FF7F■
lightgreen#90EE90■
palegreen#98F898■
aquamarine#7FFFD4■
honeydew#F0FFF0■

蓝

颜色名称代码颜色
midnightblue#191970■
navy#000080■
darkblue#00008B■
darkslateblue#483D8B■
mediumblue#0000CD■
royalblue#4169E1■
dodgerblue#1E90FF■
cornflowerblue#6495ED■
deepskyblue#00BFFF■
lightskyblue#87CEFA■
lightsteelblue#B0C4DE■
lightblue#ADD8E6■
steelblue#4682B4■
darkcyan#008B8B■
cadetblue#5F9EA0■
darkturquoise#00CED1■
mediumturquoise#48D1CC■
turquoise#40E0D0■
skyblue#87CECB■
powderblue#B0E0E6■
paleturquoise#AFEEEE■
lightcyan#E0FFFF■
azure#F0FFFF■
aliceblue#F0F8FF■
aqua(cyan)#00FFFF■

黑~灰~白

颜色名称代码颜色
black#000000■
dimgray#696969■
gray#808080■
slategray#708090■
lightslategray#778899■
dakgray#A9A9A9■
silver#C0C0C0■
lightgray#D3D3D3■
gainsboro#DCDCDC■
whitesmoke#F5F5F5■
ghostwhite#F8F8FF■
white#FFFFFF■

布局

CSS 盒

标准盒模型 vs IE盒模型的区别。

属性box-sizing: content-box
（默认值：标准盒模型）		box-sizing: border-box
（IE盒模型）
Content✅ 算入 width/height✅ 算入 width/height
Padding❌ 不算入（额外增加）✅ 算入 width/height
Border❌ 不算入（额外增加）✅ 算入 width/height
Margin❌ 永远不算入❌ 永远不算入

提示

content 指元素的实际内容区域。

两个模型的 margin 均不会影响元素本身的总尺寸，但会影响布局：

  • getBoundingClientRect() 获取的整体占位。
  • 垂直方向的 margin 会发生 外边距合并（margin collapsing）现象。

flex

提示

display:flex 的作用范围 只影响直接子元素 ，只有它的直接子元素会变成 flex items 。

flex-shrink: 0; 仅在 主轴方向 空间不够时不压缩容器，不控制交叉轴方向。

「 Enlin的文档♪(^∇^*) - 使用 VuePress 构建🥳 」