CSS 属性与值

/* 基本语法 */
property: value;
 
/* 示例 */
color: red;
width: 100px;
margin: 10px 20px;
background: linear-gradient(to right, #007bff, #00d4ff);

background = <bg-layer> , <bg-layer> , <final-bg-layer>
 
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
 
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

/* <length> - 长度类型 */
width: 100px;           /* 绝对长度 */
font-size: 1.5rem;      /* 相对长度 */
margin: 10%;            /* 百分比长度 */
 
/* <percentage> - 百分比类型 */
width: 50%;             /* 相对于父元素宽度 */
opacity: 50%;           /* 注意：opacity 接受 <number>，不是 <percentage> */
 
/* <number> - 数值类型 */
opacity: 0.5;           /* 0-1 之间的数值 */
z-index: 100;           /* 整数 */
line-height: 1.5;       /* 无单位数值 */
 
/* <color> - 颜色类型 */
color: red;             /* 关键字 */
color: #ff0000;         /* 十六进制 */
color: rgb(255, 0, 0);  /* RGB 函数 */
color: oklch(0.7 0.15 0); /* OKLCH 颜色 */
 
/* <string> - 字符串类型 */
content: "Hello";
font-family: "Arial";
 
/* <url> - URL 类型 */
background-image: url('image.png');
 
/* <integer> - 整数类型 */
z-index: 100;
column-count: 3;
 
/* <angle> - 角度类型 */
transform: rotate(45deg);
background: linear-gradient(90deg, red, blue);
 
/* <time> - 时间类型 */
transition-duration: 0.3s;
animation-delay: 100ms;
 
/* <frequency> - 频率类型（用于 CSS 语音模块） */
voice-pitch: 250Hz;        /* 频率值，赫兹 */
voice-pitch: 1.5kHz;       /* 千赫兹 */
 
/* <resolution> - 分辨率类型（用于媒体查询） */
@media (min-resolution: 96dpi) { }     /* 每英寸点数 */
@media (min-resolution: 2dppx) { }     /* 每像素点数（即 DPR） */
@media (min-resolution: 38dpcm) { }    /* 每厘米点数 */

/* <position> - 位置类型（用于 background-position 等） */
background-position: center;
background-position: top left;
background-position: 50% 50%;
background-position: 10px 20px;
background-position: right 10px bottom 20px;
 
/* <gradient> - 渐变类型 */
background: linear-gradient(to right, red, blue);
background: radial-gradient(circle, red, blue);
background: conic-gradient(red, yellow, green);
 
/* <transform-function> - 变换函数类型 */
transform: translate(100px, 50px);
transform: rotate(45deg);
transform: scale(1.5);
transform: matrix(1, 0, 0, 1, 0, 0);
 
/* <filter-function> - 滤镜函数类型 */
filter: blur(5px);
filter: brightness(1.2);
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
 
/* <timing-function> - 缓动函数类型 */
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: steps(4, end);

/* 允许的类型转换 */
color: red;              /* <color> → 内部转换为 rgb(255, 0, 0) */
opacity: 50%;            /* 错误！opacity 需要 <number>，不是 <percentage> */
opacity: 0.5;            /* 正确 */
 
/* 单位转换 */
width: 1in;              /* 内部转换为 96px */
width: 2.54cm;           /* 内部转换为 96px */
transform: rotate(0.5turn); /* 内部转换为 180deg */
 
/* 颜色空间转换 */
color: #ff0000;          /* 内部转换为 sRGB 颜色 */
color: oklch(0.7 0.15 0); /* 浏览器根据设备支持选择颜色空间 */

/* 假设 html { font-size: 16px; } */
.parent {
  font-size: 20px;
}
 
.child {
  font-size: 1.5em;  /* 声明值 */
  /* 指定值：1.5em */
  /* 计算值：30px（20px × 1.5） */
  /* 使用值：30px */
  /* 实际值：30px */
}

// 获取不同阶段的值
const element = document.querySelector('.child');
 
// 计算值
const computed = getComputedStyle(element).fontSize;
console.log(computed); // "30px"
 
// 指定值（通过 CSSStyleDeclaration）
const specified = element.style.fontSize;
console.log(specified); // "1.5em"

/* display 属性 */
display: block;      /* 块级元素 */
display: inline;     /* 行内元素 */
display: inline-block; /* 行内块元素 */
display: flex;       /* 弹性容器 */
display: grid;       /* 网格容器 */
display: none;       /* 不显示 */
 
/* position 属性 */
position: static;    /* 默认定位 */
position: relative;  /* 相对定位 */
position: absolute;  /* 绝对定位 */
position: fixed;     /* 固定定位 */
position: sticky;    /* 粘性定位 */
 
/* overflow 属性 */
overflow: visible;   /* 可见 */
overflow: hidden;    /* 隐藏溢出 */
overflow: scroll;    /* 始终滚动 */
overflow: auto;      /* 自动滚动 */
overflow: clip;      /* 裁剪溢出 */
 
/* box-sizing 属性 */
box-sizing: content-box; /* 标准盒模型 */
box-sizing: border-box;  /* IE 盒模型 */

/* 文本相关 */
text-align: left | center | right | justify | start | end;
text-decoration: none | underline | overline | line-through;
text-transform: none | capitalize | uppercase | lowercase;
 
/* 字体相关 */
font-weight: normal | bold | lighter | bolder;
font-style: normal | italic | oblique;
 
/* 边框相关 */
border-style: none | solid | dashed | dotted | double | groove | ridge | inset | outset;
 
/* 尺寸相关 */
width: auto;
height: auto;
min-width: min-content | max-content | fit-content;

/* 标准颜色名称 */
color: red;
color: blue;
color: green;
color: orange;
 
/* 特殊关键字 */
color: transparent;    /* 透明 */
color: currentColor;   /* 当前颜色值 */
 
/* 系统颜色 */
color: LinkText;       /* 链接颜色 */
color: Canvas;         /* 背景颜色 */
color: CanvasText;     /* 文本颜色 */

/* 3 位十六进制（RGB） */
color: #f00;        /* 红色 */
color: #0f0;        /* 绿色 */
color: #00f;        /* 蓝色 */
 
/* 6 位十六进制 */
color: #ff0000;     /* 红色 */
color: #00ff00;     /* 绿色 */
color: #0000ff;     /* 蓝色 */
 
/* 4 位十六进制（RGBA） */
color: #f00f;       /* 红色，不透明 */
color: #f008;       /* 红色，半透明 */
 
/* 8 位十六进制（RGBA） */
color: #ff0000ff;   /* 红色，不透明 */
color: #ff000080;   /* 红色，50% 透明 */

/* RGB */
color: rgb(255, 0, 0);           /* 红色 */
color: rgb(0, 255, 0);           /* 绿色 */
color: rgb(0, 0, 255);           /* 蓝色 */
 
/* RGBA */
color: rgba(255, 0, 0, 1);       /* 红色，不透明 */
color: rgba(255, 0, 0, 0.5);     /* 红色，50% 透明 */
 
/* 现代语法（空格分隔） */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);       /* 带透明度 */
color: rgb(255 0 0 / 50%);       /* 透明度用百分比 */

/* HSL - 色相 (0-360) 饱和度 (0-100%) 亮度 (0-100%) */
color: hsl(0, 100%, 50%);        /* 红色 */
color: hsl(120, 100%, 50%);      /* 绿色 */
color: hsl(240, 100%, 50%);      /* 蓝色 */
color: hsl(0, 0%, 50%);          /* 灰色 */
 
/* HSLA */
color: hsla(0, 100%, 50%, 0.5);  /* 红色，50% 透明 */
 
/* 现代语法 */
color: hsl(0 100% 50%);
color: hsl(0 100% 50% / 0.5);

/* HWB - 色相 白度 黑度 */
color: hwb(0, 0%, 0%);           /* 红色 */
color: hwb(0, 20%, 20%);         /* 浅红色 */
color: hwb(0, 0%, 0%, 0.5);      /* 红色，50% 透明 */
 
/* LAB - 亮度 a 轴 (绿 - 红) b 轴 (蓝 - 黄) */
color: lab(50% 0 0);             /* 中灰 */
color: lab(100% 0 0);            /* 白色 */
color: lab(50% 80 0);            /* 红色 */
 
/* LCH - 亮度 色度 色相 */
color: lch(50% 0 0);             /* 中灰 */
color: lch(50% 100 0);           /* 红色 */
 
/* OKLAB */
color: oklab(0.5 0 0);
 
/* OKLCH */
color: oklch(0.5 0 0);
 
/* color() 函数 - 指定颜色空间 */
color: color(display-p3 1 0 0);  /* Display P3 红色 */
color: color(srgb 1 0 0);        /* sRGB 红色 */
color: color(rec2020 1 0 0);     /* Rec. 2020 红色 */

/* OKLCH 语法：oklch(亮度 色度 色相 / 透明度) */
/* 亮度 L: 0(黑) ~ 1(白) */
/* 色度 C: 0(灰) ~ 0.4(最鲜艳) */
/* 色相 H: 0~360 (角度) */
 
/* 生成感知均匀的色阶 — 这是 HSL 做不到的 */
:root {
  /* 基础色 */
  --brand: oklch(0.65 0.25 250);
 
  /* 等感知亮度变化的色阶 */
  --brand-50:  oklch(0.97 0.02 250);  /* 极浅 */
  --brand-100: oklch(0.93 0.04 250);
  --brand-200: oklch(0.87 0.08 250);
  --brand-300: oklch(0.80 0.12 250);
  --brand-400: oklch(0.72 0.18 250);
  --brand-500: oklch(0.65 0.25 250);  /* 基础色 */
  --brand-600: oklch(0.55 0.25 250);
  --brand-700: oklch(0.45 0.22 250);
  --brand-800: oklch(0.35 0.17 250);
  --brand-900: oklch(0.25 0.12 250);  /* 极深 */
}
 
/* 对比：HSL 色阶在视觉上不均匀 */
.hsl-scale {
  --hsl-200: hsl(250, 80%, 80%);  /* 视觉上偏亮 */
  --hsl-800: hsl(250, 80%, 20%);  /* 视觉上偏暗 */
  /* 同样的饱和度变化，人眼感知的差异不一致 */
}

/* 使用 color() 函数指定 Display P3 色空间 */
.vivid-red {
  /* P3 红色比 sRGB 红色更鲜艳 */
  color: color(display-p3 1 0 0);
 
  /* 带 sRGB 回退方案 */
  color: #ff0000;                          /* sRGB 回退 */
  @supports (color: color(display-p3 1 0 0)) {
    color: color(display-p3 1 0 0);        /* P3 优先 */
  }
}
 
/* 渐进增强：先写 sRGB，再覆盖 P3 */
.hero {
  background: linear-gradient(to right, #ff0000, #0000ff);           /* sRGB */
  @supports (background: linear-gradient(to right, color(display-p3 1 0 0), color(display-p3 0 0 1))) {
    background: linear-gradient(to right, color(display-p3 1 0 0), color(display-p3 0 0 1));
  }
}

/* 语法：color-mix(in <颜色空间>, <颜色1> <百分比>, <颜色2> <百分比>) */
 
/* 在 OKLCH 空间中混合（感知最均匀） */
.half-mix {
  color: color-mix(in oklch, #007bff 50%, white);
  /* 结果：感知上均匀的浅蓝色 */
}
 
/* 在不同颜色空间中混合，结果不同 */
.srgb-mix {
  color: color-mix(in srgb, #ff0000 50%, #0000ff);
  /* sRGB 空间混合 → 偏暗的紫色 */
}
 
.oklch-mix {
  color: color-mix(in oklch, #ff0000 50%, #0000ff);
  /* OKLCH 空间混合 → 更鲜艳的紫红色 */
}
 
/* 实际应用：生成状态色 */
:root {
  --color-primary: oklch(0.65 0.25 250);
}
 
.btn-primary {
  background: var(--color-primary);
}
 
.btn-primary:hover {
  /* 混合 15% 黑色 → 自动变深 */
  background: color-mix(in oklch, var(--color-primary), black 15%);
}
 
.btn-primary:active {
  background: color-mix(in oklch, var(--color-primary), black 25%);
}
 
.btn-primary:disabled {
  /* 混合 60% 灰色 → 自动变灰 */
  background: color-mix(in oklch, var(--color-primary), gray 60%);
}
 
/* 生成半透明效果（替代 rgba） */
.overlay {
  background: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* 语法：color-space from <color> 通道值 */
 
:root {
  --brand: oklch(0.65 0.25 250);
}
 
/* 从现有颜色创建变体 */
.lighter {
  /* 提高亮度 15% */
  color: oklch(from var(--brand) calc(l + 0.15) c h);
}
 
.darker {
  /* 降低亮度 15% */
  color: oklch(from var(--brand) calc(l - 0.15) c h);
}
 
.complementary {
  /* 色相旋转 180° */
  color: oklch(from var(--brand) l c calc(h + 180));
}
 
.desaturated {
  /* 降低色度 */
  color: oklch(from var(--brand) l calc(c * 0.3) h);
}
 
/* 在 HSL 空间中操作 */
.hsl-shift {
  color: hsl(from var(--brand) calc(h + 30) s l);
}
 
/* 提取透明度 */
.semi-transparent {
  color: oklch(from var(--brand) l c h / 0.5);
}

/* 像素 - 最常用 */
width: 100px;
 
/* 厘米 */
width: 1cm;
 
/* 毫米 */
width: 10mm;
 
/* 英寸 */
width: 1in;        /* 1in = 96px = 2.54cm */
 
/* 点（印刷单位） */
width: 72pt;       /* 1pt = 1/72in */
 
/* 派卡（印刷单位） */
width: 6pc;        /* 1pc = 12pt */

/* em - 相对于父元素字体大小 */
font-size: 1.5em;     /* 父元素字体大小的 1.5 倍 */
padding: 2em;         /* 当前元素字体大小的 2 倍 */
 
/* rem - 相对于根元素 (html) 字体大小 */
font-size: 1.2rem;    /* 根元素字体大小的 1.2 倍 */
width: 10rem;
 
/* vw - 视口宽度的 1% */
width: 50vw;          /* 视口宽度的 50% */
 
/* vh - 视口高度的 1% */
height: 100vh;        /* 视口高度的 100% */
 
/* vmin - 视口较小边的 1% */
width: 100vmin;       /* 视口宽高中较小值的 100% */
 
/* vmax - 视口较大边的 1% */
width: 100vmax;       /* 视口宽高中较大值的 100% */
 
/* % - 相对于父元素 */
width: 50%;           /* 父元素宽度的 50% */
height: 100%;         /* 父元素高度的 100% */
 
/* ch - 字符"0"的宽度 */
width: 80ch;          /* 80 个字符的宽度 */
 
/* ex - 字母"x"的高度 */
line-height: 2ex;
 
/* lh - 元素的行高 */
margin-top: 2lh;      /* 两倍行高 */
 
/* rlh - 根元素的行高 */
margin-top: 2rlh;
 
/* cap - 大写字母高度 */
height: 1cap;
 
/* ic - CJK 文字宽度 */
width: 10ic;

/* 宽高 */
width: 50%;
height: 100%;
 
/* 字体大小（相对于父元素字体大小） */
font-size: 120%;
font-size: 80%;
 
/* 内边距（相对于父元素宽度） */
padding: 10%;
 
/* 行高（相对于元素自身字体大小） */
line-height: 150%;
line-height: 1.5;
 
/* 定位偏移 */
left: 50%;
top: 25%;
 
/* 变形原点 */
transform-origin: 50% 50%;
 
/* 背景位置 */
background-position: 50% 50%;
 
/* 透明度 */
opacity: 0.5;           /* 50% 透明 */
 
/* 缩放 */
transform: scale(150%); /* 放大 1.5 倍 */

/* 整数 */
z-index: 100;
order: 2;
column-count: 3;
flex-grow: 1;
 
/* 小数 */
opacity: 0.5;
opacity: 0.75;
transform: scale(1.5);
line-height: 1.5;
 
/* 无单位数值 */
line-height: 1.5;       /* 字体大小的 1.5 倍 */
font-weight: 400;       /* normal */
font-weight: 700;       /* bold */
flex: 1;
aspect-ratio: 16 / 9;

/* 度 (0-360) */
transform: rotate(45deg);
 
/* 弧度 */
transform: rotate(0.785rad);   /* 约等于 45deg */
 
/* 梯度 */
transform: rotate(50grad);     /* 约等于 45deg */
 
/* 圈数 */
transform: rotate(0.125turn);  /* 约等于 45deg */
 
/* 渐变角度 */
background: linear-gradient(45deg, red, blue);
background: conic-gradient(from 90deg, red, blue);
 
/* 角度换算 */
/* 1turn = 360deg = 2πrad = 400grad */

/* 秒 */
transition-duration: 0.3s;
animation-duration: 1s;
 
/* 毫秒 */
transition-duration: 300ms;
animation-duration: 1000ms;
 
/* 延迟 */
transition-delay: 0.5s;
animation-delay: 200ms;

/* 引号方式 */
content: "Hello";
content: 'World';
content: "It's a test";
 
/* 转义字符 */
content: "Line1\A Line2";     /* 换行 */
 
/* 字体名称 */
font-family: "Helvetica Neue";
font-family: "Microsoft YaHei";
 
/* 伪元素内容 */
content: "→";
content: "Read more";

/* 相对路径 */
background-image: url('image.png');
background-image: url('./images/bg.jpg');
background-image: url('../assets/logo.svg');
 
/* 绝对路径 */
background-image: url('https://example.com/image.png');
background-image: url('/assets/image.png');
 
/* 数据 URI */
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==');
 
/* 引号可选 */
background-image: url(image.png);
background-image: url("image.png");
background-image: url('image.png');

/* 基本运算 */
width: calc(100% - 20px);           /* 减法：最常用 */
padding: calc(1rem + 10px);         /* 加法 */
font-size: calc(16px * 1.5);        /* 乘法 */
width: calc(100% / 3);              /* 除法 */
 
/* 混合单位 */
height: calc(100vh - 60px - 2rem);
margin: calc(var(--spacing) * 2 + 10px);
 
/* 嵌套 calc()（不推荐，可读性差） */
width: calc(100% - calc(20px + calc(10px * 2)));
 
/* 推荐：简化表达式 */
width: calc(100% - 40px);
 
/* 与 CSS 变量结合 */
:root {
  --container-width: 1200px;
  --gutter: 20px;
}
 
.column {
  width: calc((var(--container-width) - var(--gutter) * 2) / 3);
}
 
/* 注意事项 */
.invalid {
  width: calc(100px + 20);     /* 错误：必须带单位 */
  width: calc(100px 20px);     /* 错误：缺少运算符 */
}
 
.valid {
  width: calc(100px + 20px);   /* 正确 */
  width: calc(100 + 20);       /* 正确：无单位数值 */
}

/* min() — 取最小值 */
.container {
  /* 宽度不超过 500px，但可以是 50%（如果更小） */
  width: min(50%, 500px);
 
  /* 等价于 */
  width: 50%;
  max-width: 500px;
}
 
/* max() — 取最大值 */
.sidebar {
  /* 宽度至少 300px，但可以是 50%（如果更大） */
  width: max(300px, 50%);
 
  /* 等价于 */
  width: 50%;
  min-width: 300px;
}
 
/* clamp() — 区间限制（最常用） */
.text {
  /* 字体大小在 16px 到 24px 之间，首选 2vw */
  font-size: clamp(16px, 2vw, 24px);
 
  /* 等价于 */
  font-size: max(16px, min(2vw, 24px));
}
 
/* 响应式布局 */
.hero {
  /* 高度在 400px 到 800px 之间，首选 60vh */
  height: clamp(400px, 60vh, 800px);
}
 
/* 流式排版 */
h1 {
  /* 字体大小随视口缩放，但有上下限 */
  font-size: clamp(2rem, 5vw, 4rem);
}
 
/* 组合使用 */
.grid {
  /* 列宽：最小 250px，首选 1fr，最大不超过 400px */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
 
/* 复杂场景 */
.element {
  /* 宽度：至少 200px，首选 calc(50% - 20px)，最大 600px */
  width: clamp(200px, calc(50% - 20px), 600px);
}

/* 语法：round(<舍入策略>, <值>, <舍入间隔>) */
 
/* 舍入策略 */
.nearest {
  /* 四舍五入到最近的 10px 倍数 */
  width: round(nearest, 105px, 10px);  /* 结果：110px */
}
 
.up {
  /* 向上舍入（天花板） */
  width: round(up, 101px, 10px);       /* 结果：110px */
}
 
.down {
  /* 向下舍入（地板） */
  width: round(down, 109px, 10px);     /* 结果：100px */
}
 
.to-zero {
  /* 向零舍入（截断） */
  width: round(to-zero, -109px, 10px); /* 结果：-100px */
}
 
/* 实际应用：网格对齐 */
.grid-item {
  /* 宽度舍入到最近的 20px 倍数，确保网格对齐 */
  width: round(nearest, calc(100% / 3), 20px);
}
 
/* 整数舍入 */
.columns {
  /* 列数必须是整数 */
  column-count: round(nearest, calc(100vw / 300px), 1);
}

/* mod() — 数学取模（结果符号与除数相同） */
.example1 {
  width: mod(100px, 30px);    /* 结果：10px */
  width: mod(-100px, 30px);   /* 结果：20px（-100 = -4*30 + 20） */
}
 
/* rem() — 余数（结果符号与被除数相同） */
.example2 {
  width: rem(100px, 30px);    /* 结果：10px */
  width: rem(-100px, 30px);   /* 结果：-10px */
}
 
/* 实际应用：循环样式 */
.item:nth-child(1) { --index: 1; }
.item:nth-child(2) { --index: 2; }
.item:nth-child(3) { --index: 3; }
.item:nth-child(4) { --index: 4; }
 
.item {
  /* 每 3 个元素循环一次颜色 */
  --color-index: mod(var(--index), 3);
}
 
/* 网格布局中的周期性模式 */
.grid-item {
  /* 每 4 列换行 */
  --column: mod(var(--index) - 1, 4);
  grid-column: calc(var(--column) + 1);
}

/* 基本三角函数 */
.circle-point {
  /* 计算圆上的点 */
  --angle: 45deg;
  --radius: 100px;
 
  /* x 坐标 */
  left: calc(50% + cos(var(--angle)) * var(--radius));
  /* y 坐标 */
  top: calc(50% + sin(var(--angle)) * var(--radius));
}
 
/* 圆形布局 */
.circular-menu {
  position: relative;
  width: 300px;
  height: 300px;
}
 
.menu-item {
  position: absolute;
  --i: 0;  /* 第几个元素，通过 CSS 变量或 attr() 设置 */
  --total: 8;  /* 总元素数 */
  --angle: calc(360deg / var(--total) * var(--i));
  --radius: 120px;
 
  left: calc(50% + cos(var(--angle)) * var(--radius));
  top: calc(50% + sin(var(--angle)) * var(--radius));
  transform: translate(-50%, -50%);
}
 
/* 旋转效果 */
.rotating-element {
  --rotation: 30deg;
  transform: rotate(var(--rotation));
 
  /* 计算旋转后的尺寸 */
  --cos: cos(var(--rotation));
  --sin: sin(var(--rotation));
  width: calc(100px * var(--cos) + 50px * var(--sin));
}
 
/* 反三角函数 */
.angle-calc {
  /* atan() — 反正切 */
  --angle: atan(1);  /* 结果：45deg（0.785rad） */
 
  /* atan2() — 双参数反正切（更常用） */
  --angle: atan2(1, 1);  /* 结果：45deg */
  --angle: atan2(-1, -1);  /* 结果：-135deg */
 
  /* asin() / acos() — 反正弦/反余弦 */
  --angle: asin(0.5);  /* 结果：30deg */
  --angle: acos(0.5);  /* 结果：60deg */
}
 
/* 波浪效果 */
.wave {
  --amplitude: 20px;
  --frequency: 0.02;
  --x: 100px;
 
  /* y = A * sin(f * x) */
  transform: translateY(calc(var(--amplitude) * sin(var(--frequency) * var(--x))));
}

/* pow() — 幂运算 */
.power-example {
  /* 2 的 3 次方 */
  width: calc(1px * pow(2, 3));  /* 结果：8px */
 
  /* 平方 */
  width: calc(1px * pow(10, 2));  /* 结果：100px */
 
  /* 实际应用：指数增长的间距 */
  --level: 3;
  padding: calc(1rem * pow(1.5, var(--level)));  /* 1rem * 3.375 = 3.375rem */
}
 
/* sqrt() — 平方根 */
.sqrt-example {
  /* 平方根 */
  width: calc(1px * sqrt(100));  /* 结果：10px */
 
  /* 实际应用：根据面积计算边长 */
  --area: 256;
  width: calc(1px * sqrt(var(--area)));  /* 结果：16px */
}
 
/* hypot() — 斜边长度（勾股定理） */
.hypot-example {
  /* 计算直角三角形的斜边 */
  --a: 3;
  --b: 4;
  --hypotenuse: hypot(var(--a), var(--b));  /* 结果：5 */
 
  width: calc(1px * hypot(var(--a), var(--b)));  /* 结果：5px */
 
  /* 实际应用：计算对角线距离 */
  --width: 300px;
  --height: 400px;
  --diagonal: hypot(var(--width), var(--height));  /* 结果：500px */
}
 
/* log() — 对数 */
.log-example {
  /* 自然对数 */
  --value: log(10);  /* 结果：2.302... */
 
  /* 指定底数 */
  --value: log(100, 10);  /* 结果：2（以 10 为底） */
 
  /* 实际应用：对数缩放 */
  --size: calc(1rem * log(var(--count), 2));
}
 
/* exp() — 指数函数（e 的幂） */
.exp-example {
  /* e 的 1 次方 */
  --value: exp(1);  /* 结果：2.718... */
 
  /* 实际应用：指数衰减 */
  --distance: 100px;
  --opacity: calc(1 / exp(var(--distance) / 50px));
}
 
/* 缓动函数示例 */
.ease-in {
  /* 二次缓入 */
  --progress: 0.5;
  --eased: calc(var(--progress) * var(--progress));
  transform: translateX(calc(var(--eased) * 100px));
}

/* abs() — 绝对值 */
.abs-example {
  /* 绝对值 */
  width: abs(-100px);  /* 结果：100px */
  width: abs(100px);   /* 结果：100px */
 
  /* 实际应用：计算距离 */
  --start: 100px;
  --end: 250px;
  --distance: abs(var(--end) - var(--start));  /* 结果：150px */
}
 
/* sign() — 符号函数 */
.sign-example {
  /* 返回符号 */
  --value: sign(100px);   /* 结果：1 */
  --value: sign(-100px);  /* 结果：-1 */
  --value: sign(0px);     /* 结果：0 */
 
  /* 实际应用：根据方向应用变换 */
  --direction: sign(var(--velocity));
  transform: scaleX(var(--direction));  /* 根据速度方向翻转 */
}
 
/* 组合使用：计算有符号距离 */
.signed-distance {
  --from: 100px;
  --to: 50px;
  --distance: calc(sign(var(--to) - var(--from)) * abs(var(--to) - var(--from)));
  /* 结果：-50px（负值表示向左移动） */
}

/* 示例 1：螺旋布局 */
.spiral-container {
  position: relative;
  width: 400px;
  height: 400px;
}
 
.spiral-item {
  position: absolute;
  --i: 0;  /* 元素索引 */
  --total: 20;
 
  /* 螺旋参数 */
  --angle: calc(360deg * var(--i) / 5);  /* 每 5 个元素转一圈 */
  --radius: calc(var(--i) * 15px);  /* 半径随索引增长 */
 
  /* 计算位置 */
  left: calc(50% + cos(var(--angle)) * var(--radius));
  top: calc(50% + sin(var(--angle)) * var(--radius));
 
  /* 大小随半径变化 */
  width: calc(20px + var(--i) * 2px);
  height: calc(20px + var(--i) * 2px);
 
  transform: translate(-50%, -50%);
}
 
/* 示例 2：动态网格 */
.dynamic-grid {
  --min-width: 200px;
  --max-width: 400px;
  --gap: 20px;
 
  /* 计算列数 */
  --available-width: calc(100vw - 40px);
  --columns: floor(calc(var(--available-width) / (var(--min-width) + var(--gap))));
 
  /* 计算实际列宽 */
  --column-width: calc((var(--available-width) - var(--gap) * (var(--columns) - 1)) / var(--columns));
 
  /* 限制列宽范围 */
  --final-width: clamp(var(--min-width), var(--column-width), var(--max-width));
 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-width), 1fr));
  gap: var(--gap);
}
 
/* 示例 3：物理模拟（简谐振动） */
.oscillator {
  --time: 0s;
  --amplitude: 100px;
  --frequency: 2;  /* Hz */
  --phase: 0deg;
 
  /* y = A * sin(2πft + φ) */
  --position: calc(
    var(--amplitude) *
    sin(360deg * var(--frequency) * var(--time) + var(--phase))
  );
 
  transform: translateY(var(--position));
}

/* attr() - 获取属性值 */
content: attr(data-tooltip);
width: attr(data-width px);    /* 带单位 */
 
/* var() - CSS 变量 */
color: var(--main-color);
color: var(--main-color, #333); /* 带默认值 */
background: var(--bg-color, var(--fallback-color, white));

/* 2D 变换 */
transform: translate(100px, 50px);
transform: translateX(100px);
transform: translateY(50px);
transform: translate3d(100px, 50px, 20px);
 
transform: rotate(45deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(1, 1, 0, 45deg);
 
transform: scale(1.5);
transform: scale(1.5, 2);
transform: scaleX(1.5);
transform: scaleY(2);
transform: scale3d(1.5, 2, 1);
 
transform: skew(10deg, 20deg);
transform: skewX(10deg);
transform: skewY(20deg);
 
transform: matrix(1, 0, 0, 1, 100, 50);
 
/* 3D 变换 */
transform: perspective(1000px);
transform: translateZ(100px);
transform: rotate3d(1, 1, 0, 45deg);
transform: matrix3d(...);

/* 单个滤镜 */
filter: blur(5px);                    /* 模糊 */
filter: brightness(1.2);              /* 亮度 */
filter: contrast(1.5);                /* 对比度 */
filter: grayscale(100%);              /* 灰度 */
filter: hue-rotate(90deg);            /* 色相旋转 */
filter: invert(100%);                 /* 反转 */
filter: opacity(0.5);                 /* 透明度 */
filter: saturate(2);                  /* 饱和度 */
filter: sepia(100%);                  /* 褐色 */
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
 
/* 组合滤镜 */
filter: blur(2px) brightness(1.2) contrast(1.1);

/* 图像函数 */
background-image: image("image.png");
background-image: image-set("image.png" 1x, "image@2x.png" 2x);
background-image: cross-fade(url(a.png), url(b.png), 50%);
background-image: element(#myElement);
 
/* 渐变函数 */
background: linear-gradient(to right, red, blue);
background: radial-gradient(circle, red, blue);
background: conic-gradient(red, yellow, green, blue);
 
/* 选择器函数 */
:is(h1, h2, h3) { }
:where(ul, ol) li { }
:not(p) { }
:has(img) { }
 
/* 伪类函数 */
:nth-child(2n+1) { }
:nth-of-type(odd) { }
:lang(zh-CN) { }
 
/* 计数器函数 */
counter-reset: section;
counter-increment: section;
content: counter(section);
content: counters(section, ".");

/* 基本语法 */
background: linear-gradient(方向，颜色 1, 颜色 2, ...);
 
/* 方向关键词 */
background: linear-gradient(to right, red, blue);       /* 从左到右 */
background: linear-gradient(to left, red, blue);        /* 从右到左 */
background: linear-gradient(to top, red, blue);         /* 从下到上 */
background: linear-gradient(to bottom, red, blue);      /* 从上到下 */
background: linear-gradient(to top right, red, blue);   /* 对角 */
 
/* 角度 */
background: linear-gradient(45deg, red, blue);          /* 45 度角 */
background: linear-gradient(0deg, red, blue);           /* 从下到上 */
background: linear-gradient(90deg, red, blue);          /* 从左到右 */
 
/* 多色渐变 */
background: linear-gradient(red, yellow, green, blue);
 
/* 颜色位置 */
background: linear-gradient(red 0%, yellow 50%, blue 100%);
background: linear-gradient(red 30%, blue 70%);
background: linear-gradient(red 0%, red 30%, blue 30%, blue 100%); /* 硬边缘 */
 
/* 透明渐变 */
background: linear-gradient(to right, transparent, red);
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
 
/* 重复渐变 */
background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);

/* 基本语法 */
background: radial-gradient(形状 大小 at 位置，颜色 1, 颜色 2, ...);
 
/* 形状 */
background: radial-gradient(circle, red, blue);         /* 圆形 */
background: radial-gradient(ellipse, red, blue);        /* 椭圆（默认） */
 
/* 大小 */
background: radial-gradient(closest-side, red, blue);   /* 最近边 */
background: radial-gradient(closest-corner, red, blue); /* 最近角 */
background: radial-gradient(farthest-side, red, blue);  /* 最远边 */
background: radial-gradient(farthest-corner, red, blue);/* 最远角 */
background: radial-gradient(circle 100px, red, blue);   /* 固定大小 */
 
/* 位置 */
background: radial-gradient(at center, red, blue);      /* 居中 */
background: radial-gradient(at top left, red, blue);    /* 左上角 */
background: radial-gradient(at 50% 50%, red, blue);     /* 指定位置 */
background: radial-gradient(at 100px 200px, red, blue); /* 固定位置 */
 
/* 组合使用 */
background: radial-gradient(circle closest-side at 50% 50%, red, blue);
 
/* 多色渐变 */
background: radial-gradient(circle, red, yellow, green, blue);
 
/* 重复渐变 */
background: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px);

/* 基本语法 */
background: conic-gradient(from 起始角度 at 位置，颜色 1, 颜色 2, ...);
 
/* 基本用法 */
background: conic-gradient(red, yellow, green, blue, red);
 
/* 指定起始角度 */
background: conic-gradient(from 0deg, red, yellow, green, blue);
background: conic-gradient(from 90deg, red, yellow, green, blue);
 
/* 指定中心点 */
background: conic-gradient(at center, red, yellow, blue);
background: conic-gradient(at 25% 25%, red, yellow, blue);
 
/* 饼图效果 */
background: conic-gradient(red 0% 30%, yellow 30% 60%, blue 60% 100%);
 
/* 重复渐变 */
background: repeating-conic-gradient(red 0% 10%, yellow 10% 20%);
 
/* 实际应用 - 棋盘格 */
background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 20px 20px;

/* 定义变量 */
:root {
  --main-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 16px;
  --spacing: 1rem;
  --border-radius: 4px;
}
 
/* 使用变量 */
.button {
  background-color: var(--main-color);
  font-size: var(--font-size-base);
  padding: var(--spacing);
  border-radius: var(--border-radius);
}
 
/* 带默认值 */
.alert {
  color: var(--alert-color, #ff0000);  /* 如果未定义，使用默认值 */
}
 
/* 变量组合 */
.box {
  padding: var(--spacing) calc(var(--spacing) * 2);
}

/* 全局变量 */
:root {
  --global-color: blue;
}
 
/* 局部变量 */
.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}
 
/* 变量覆盖 */
.dark-theme {
  --main-color: #1a1a1a;
  --text-color: #ffffff;
}
 
/* 嵌套作用域 */
.parent {
  --parent-value: red;
}
.parent .child {
  --child-value: blue;
  color: var(--parent-value);  /* 可继承父级变量 */
}

/* CSS 中动态更新 */
.button:hover {
  --button-color: #0056b3;
  background-color: var(--button-color);
}
 
/* 响应式更新 */
@media (max-width: 768px) {
  :root {
    --font-size-base: 14px;
    --spacing: 0.75rem;
  }
}

// JavaScript 中动态更新
const root = document.documentElement;
root.style.setProperty('--main-color', '#ff0000');
 
// 读取变量值
const color = getComputedStyle(root).getPropertyValue('--main-color');

/* background 简写 */
background: #fff url('bg.png') no-repeat center/cover fixed;
 
/* 等同于以下独立属性 */
background-color: #fff;
background-image: url('bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
background-origin: padding-box;
background-clip: border-box;
 
/* font 简写 */
font: italic small-caps bold 16px/1.5 Arial, sans-serif;
 
/* 等同于 */
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;
 
/* margin/padding 简写 */
margin: 10px 20px 30px 40px;  /* 上 右 下 左 */
margin: 10px 20px 30px;       /* 上 左右 下 */
margin: 10px 20px;            /* 上下 左右 */
margin: 10px;                 /* 四边相同 */
 
/* border 简写 */
border: 1px solid #ccc;
 
/* 等同于 */
border-width: 1px;
border-style: solid;
border-color: #ccc;

/* 继承属性无需 inherit，天然继承 */
body { color: #333; }
p { /* color 自动继承 #333，无需声明 */ }
 
/* 不可继承属性需要 inherit 才能继承 */
.parent {
  border: 1px solid red;
}
.child {
  border: inherit;  /* 强制继承父元素的边框 */
}
 
/* 常见用途：重置链接颜色继承父元素 */
a {
  color: inherit;   /* 链接颜色跟随父元素，而非浏览器默认蓝色 */
}

/* CSS 规范初始值 vs 浏览器默认样式 */
/* display 的初始值是 inline，但浏览器给 <div> 设了 block */
div {
  display: initial;  /* → inline（规范初始值），而非 block（浏览器默认） */
}
 
/* color 的初始值是 CanvasText（通常为黑色） */
.highlight {
  color: initial;    /* → 黑色 */
}
 
/* 重置所有属性为初始值（慎用） */
.reset-all {
  all: initial;      /* 将所有属性重置为规范初始值 */
  /* 注意：display 变为 inline，font-size 变为 medium，等 */
}

/* 可继承属性 → unset 等同于 inherit */
p {
  color: unset;    /* color 可继承 → 等同于 inherit */
}
 
/* 不可继承属性 → unset 等同于 initial */
div {
  border: unset;   /* border 不可继承 → 等同于 initial（none） */
  margin: unset;   /* margin 不可继承 → 等同于 initial（0） */
}
 
/* 实际用途：完全重置元素样式 */
.reset-button {
  all: unset;      /* 可继承属性恢复继承，不可继承属性恢复初始值 */
  /* 比 all: initial 更合理，因为保留了字体、颜色等继承 */
}

/* revert vs initial 的核心区别 */
div {
  display: revert;   /* → block（浏览器给 div 的默认样式） */
  display: initial;  /* → inline（CSS 规范初始值） */
}
 
h1 {
  font-size: revert;  /* → 约 2em（浏览器默认 h1 样式） */
  font-size: initial; /* → medium（CSS 规范初始值，通常 16px） */
}
 
/* 实际用途：在自定义组件中恢复原生表单样式 */
input[type="text"] {
  /* 先用自定义样式覆盖 */
  border: 2px solid blue;
  border-radius: 8px;
}
 
input[type="text"].native {
  /* 恢复浏览器原生输入框样式 */
  all: revert;
}

/* @layer 场景下的 revert-layer */
@layer base {
  h1 {
    color: blue;
    font-size: 2rem;
  }
}
 
@layer components {
  h1 {
    color: red;
    font-size: revert-layer;  /* 回退到 base 层的 2rem */
  }
}
 
@layer override {
  h1 {
    color: revert-layer;      /* 回退到 components 层的 red */
  }
}

/* 推荐：使用 OKLCH 生成视觉均匀的色阶 */
:root {
  /* 基础品牌色 */
  --brand-hue: 250;
  --brand-chroma: 0.25;
  --brand-lightness: 0.65;
  
  /* 感知均匀的色阶 */
  --brand-50:  oklch(0.97 0.02 var(--brand-hue));
  --brand-100: oklch(0.93 0.04 var(--brand-hue));
  --brand-200: oklch(0.87 0.08 var(--brand-hue));
  --brand-300: oklch(0.80 0.12 var(--brand-hue));
  --brand-400: oklch(0.72 0.18 var(--brand-hue));
  --brand-500: oklch(var(--brand-lightness) var(--brand-chroma) var(--brand-hue));
  --brand-600: oklch(0.55 0.25 var(--brand-hue));
  --brand-700: oklch(0.45 0.22 var(--brand-hue));
  --brand-800: oklch(0.35 0.17 var(--brand-hue));
  --brand-900: oklch(0.25 0.12 var(--brand-hue));
}
 
/* 对比：HSL 色阶在视觉上不均匀 */
.hsl-scale {
  /* 同样的饱和度变化，人眼感知的差异不一致 */
  --hsl-200: hsl(250, 80%, 80%);  /* 视觉上偏亮 */
  --hsl-500: hsl(250, 80%, 50%);  /* 标准 */
  --hsl-800: hsl(250, 80%, 20%);  /* 视觉上偏暗 */
}

/* 推荐：使用 color-mix() 自动生成状态变体 */
:root {
  --color-primary: oklch(0.65 0.25 250);
  --color-success: oklch(0.7 0.19 145);
  --color-warning: oklch(0.8 0.15 85);
  --color-danger: oklch(0.65 0.25 25);
}
 
/* 自动生成悬停、激活、禁用状态 */
.btn-primary {
  background: var(--color-primary);
}
 
.btn-primary:hover {
  /* 混合 15% 黑色 → 自动变深 */
  background: color-mix(in oklch, var(--color-primary), black 15%);
}
 
.btn-primary:active {
  background: color-mix(in oklch, var(--color-primary), black 25%);
}
 
.btn-primary:disabled {
  /* 混合 60% 灰色 → 自动变灰 */
  background: color-mix(in oklch, var(--color-primary), gray 60%);
}
 
/* 生成半透明覆盖层 */
.overlay {
  background: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
 
/* 生成柔和的背景色 */
.alert-info {
  background: color-mix(in oklch, var(--color-primary) 10%, white);
  border-color: color-mix(in oklch, var(--color-primary) 30%, white);
}

/* 为广色域设备提供更鲜艳的颜色 */
.hero {
  /* 基础 sRGB 版本 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  /* Display P3 增强版本 */
  @supports (background: linear-gradient(to right, color(display-p3 1 0 0), color(display-p3 0 0 1))) {
    background: linear-gradient(
      135deg,
      color(display-p3 0.4 0.5 0.9) 0%,
      color(display-p3 0.5 0.3 0.6) 100%
    );
  }
}
 
/* 检测广色域支持 */
@media (color-gamut: p3) {
  .vivid-colors {
    /* 仅在支持 P3 色域的设备上应用 */
    color: color(display-p3 1 0 0);
  }
}

/* 使用 clamp() 实现无断点流式排版 */
:root {
  /* 字体大小随视口平滑缩放 */
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
  --font-size-lg: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  --font-size-2xl: clamp(2rem, 1.5rem + 1.2vw, 3rem);
  --font-size-3xl: clamp(2.5rem, 2rem + 1.5vw, 4rem);
}
 
/* 间距也使用流式系统 */
:root {
  --spacing-xs: clamp(0.25rem, 0.2rem + 0.15vw, 0.5rem);
  --spacing-sm: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --spacing-md: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
  --spacing-lg: clamp(1.5rem, 1.2rem + 0.8vw, 2.5rem);
  --spacing-xl: clamp(2rem, 1.5rem + 1.2vw, 4rem);
}
 
/* 应用 */
h1 {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-lg);
}
 
p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

/* 六边形网格布局 */
.hex-grid {
  --hex-size: 100px;
  --hex-gap: 10px;
  
  /* 六边形的几何关系 */
  --hex-width: var(--hex-size);
  --hex-height: calc(var(--hex-size) * sqrt(3) / 2);
  --hex-offset-x: calc(var(--hex-width) * 3 / 4 + var(--hex-gap));
  --hex-offset-y: calc(var(--hex-height) + var(--hex-gap));
}
 
.hex-item {
  width: var(--hex-width);
  height: var(--hex-height);
  
  /* 奇数行偏移 */
  --row: calc(var(--index) / 6);
  --is-odd: mod(var(--row), 2);
  margin-left: calc(var(--is-odd) * var(--hex-offset-x) / 2);
}
 
/* 圆形进度条 */
.circular-progress {
  --progress: 75;  /* 0-100 */
  --radius: 50px;
  --circumference: calc(2 * 3.14159 * var(--radius));
  
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  
  /* 使用 conic-gradient 创建进度效果 */
  background: conic-gradient(
    from 0deg,
    #007bff calc(var(--progress) * 3.6deg),
    #e0e0e0 0
  );
  border-radius: 50%;
}

/* ❌ 不推荐：嵌套过深，难以维护 */
.complex {
  width: calc(100% - calc(20px + calc(10px * calc(2 + 1))));
}
 
/* ✅ 推荐：使用 CSS 变量分解计算 */
.better {
  --base-spacing: 10px;
  --multiplier: 3;
  --total-spacing: calc(var(--base-spacing) * var(--multiplier));
  --side-padding: calc(var(--total-spacing) * 2);
  
  width: calc(100% - var(--side-padding));
}
 
/* ✅ 推荐：简化表达式 */
.simplified {
  width: calc(100% - 60px);  /* 直接计算结果 */
}

/* 避免复杂的 calc() */
/* 不推荐 */
.box {
  width: calc(100% - calc(20px + calc(10px * 2)));
}
 
/* 推荐 */
.box {
  --spacing: 40px;
  width: calc(100% - var(--spacing));
}
 
/* 避免过度使用渐变 */
/* 不推荐 - 每个元素都有复杂渐变 */
.card {
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
}
 
/* 推荐 - 简化渐变或使用图片 */
.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 确保颜色对比度 */
.button {
  background-color: #007bff;
  color: #ffffff;  /* 对比度 > 4.5:1 */
}
 
/* 使用相对单位 */
html {
  font-size: 100%;  /* 用户可在浏览器中调整 */
}
 
body {
  font-size: 1rem;
}
 
/* 支持用户偏好 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
 
/* 为色盲用户提供备用方案 */
.color-blind-safe {
  /* 不仅依赖颜色，还使用图标、纹理或文字标签 */
  background: #dc3545;
  &::before {
    content: "⚠️ ";
  }
}

/* 问题：简写属性会重置未指定的值 */
background: url('bg.png');
background-color: #fff;
background: no-repeat;  /* 这会重置背景图片和颜色！ */
 
/* 解决方案：使用完整简写或避免后续覆盖 */
background: #fff url('bg.png') no-repeat;
 
/* 或者分开设置 */
background-image: url('bg.png');
background-repeat: no-repeat;
background-color: #fff;

/* ❌ 错误：缺少 font-size 和 font-family，整条声明无效 */
font: bold;
 
/* ✅ 正确：font 简写必须同时指定 font-size 和 font-family */
font: bold 16px/1.5 Arial, sans-serif;
 
/* ✅ 如果只想设置 font-weight，使用独立属性 */
font-weight: bold;

/* 方向顺序：上 → 右 → 下 → 左（顺时针） */
margin: 10px 20px 30px 40px;
 
/* 记忆口诀：TRBL（Top-Right-Bottom-Left）= "TRouBLe" */
 
/* 缺省规则 */
margin: 10px 20px 30px;  /* 左 = 右 = 20px */
margin: 10px 20px;       /* 上下 = 10px，左右 = 20px */
margin: 10px;            /* 四边 = 10px */