CSS 高级用法速查

渐变（Gradients）

线性渐变（Linear Gradient）

• 语法：background: linear-gradient(direction, color1, color2,...);

• 示例：background: linear-gradient(to right, red, yellow);

• 描述：沿着指定方向在多种颜色间渐变。方向可用角度（如 45deg）或关键字（如 to top 等）。

径向渐变（Radial Gradient）

• 语法：background: radial-gradient(shape size at position, color1, color2,...);

• 示例：background: radial-gradient(circle at center, red, yellow);

• 描述：从中心点向四周渐变。shape 可为 circle 或 ellipse，size 定义大小，position 定义中心位置 。

阴影（Shadows）

盒阴影（Box Shadow）

• 语法：box-shadow: h-offset v-offset blur-radius spread-radius color inset;

• 示例：box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

• 描述：为元素添加阴影。h-offset 水平偏移，v-offset 垂直偏移，blur-radius 模糊半径，spread-radius 扩展半径，color 阴影颜色，inset 表示内阴影。

文本阴影（Text Shadow）

• 语法：text-shadow: h-offset v-offset blur-radius color;

• 示例：text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

• 描述：为文本添加阴影，语法类似盒阴影但无 inset。

转换（Transforms）

平移（Translate）

• 语法：transform: translate(x, y); 或 transform: translateX(x); 或 transform: translateY(y);

• 示例：transform: translate(50px, 100px);

• 描述：移动元素位置，x 和 y 可为像素值等，translateX 和 translateY 分别控制水平和垂直平移。

缩放（Scale）

• 语法：transform: scale(x, y); 或 transform: scaleX(x); 或 transform: scaleY(y);

• 示例：transform: scale(1.5, 1.5);

• 描述：改变元素大小，x 和 y 为缩放比例，scaleX 和 scaleY 分别控制水平和垂直缩放。

旋转（Rotate）

• 语法：transform: rotate(angle);

• 示例：transform: rotate(45deg);

• 描述：围绕元素中心点旋转，角度可用多种单位。

倾斜（Skew）

• 语法：transform: skew(x-angle, y-angle); 或 transform: skewX(angle); 或 transform: skewY(angle);

• 示例：transform: skew(30deg, 10deg);

• 描述：改变元素形状使其在水平或垂直方向倾斜。

过渡（Transitions）

过渡属性（transition-property）

• 语法：transition-property: property; （可多个属性用逗号分隔，也可用 all）

• 示例：transition-property: background-color, transform;

• 描述：指定哪些 CSS 属性变化时有过渡效果。

过渡持续时间（transition-duration）

• 语法：transition-duration: time;

• 示例：transition-duration: 0.5s;

• 描述：定义过渡效果完成所需时间。

过渡时间函数（transition-timing-function）

• 语法：transition-timing-function: func;

• 示例：transition-timing-function: ease-in-out;

• 描述：定义过渡效果的速度曲线，常见值有 ease、linear 等，也可用 cubic-bezier(n,n,n,n) 自定义。

过渡延迟时间（transition-delay）

• 语法：transition-delay: time;

• 示例：transition-delay: 0.2s;

• 描述：定义过渡效果开始前的延迟时间。

可合并简写为：transition: property duration timing-function delay;

动画（Animations）

定义关键帧（@keyframes）

• 语法：

@keyframes animation-name {
  percentage {
    /* CSS 属性 */
  }
}

• 示例：

@keyframes myAnimation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

• 描述：定义动画在不同时间点的状态，percentage 可为 0% 到 100% 间任意值。

动画名称（animation-name）

• 语法：animation-name: name;

• 示例：animation-name: myAnimation;

• 描述：指定要应用的动画名称，对应 @keyframes 定义的名称。

动画持续时间（animation-duration）

• 语法：animation-duration: time;

• 示例：animation-duration: 3s;

• 描述：定义动画播放的总时长。

动画时间函数（animation-timing-function）

• 语法：animation-timing-function: func;

• 示例：animation-timing-function: ease-in-out;

• 描述：同过渡的时间函数，控制动画播放速度曲线。

动画延迟时间（animation-delay）

• 语法：animation-delay: time;

• 示例：animation-delay: 0.5s;

• 描述：定义动画开始前的延迟时间。

动画播放次数（animation-iteration-count）

• 语法：animation-iteration-count: count;

• 示例：animation-iteration-count: infinite;

• 描述：定义动画播放次数，可为数字或 infinite（无限循环）。

动画播放方向（animation-direction）

• 语法：animation-direction: direction;

• 示例：animation-direction: alternate;

• 描述：控制动画播放方向，常见值有 normal、reverse、alternate、alternate-reverse。

动画填充模式（animation-fill-mode）

• 语法：animation-fill-mode: mode;

• 示例：animation-fill-mode: forwards;

• 描述：定义动画执行前后如何应用样式，常见值有 none、forwards、backwards、both。

可合并简写为：animation: name duration timing-function delay iteration-count direction fill-mode;