增强版 CSS 框架使用文档
目录
1. 框架概述 {#1-框架概述}
本框架是一个功能完整的 CSS 工具集，提供了全面的样式解决方案，包括：
- 灵活的 12 列网格系统，支持多断点响应式设计
- 完整的全局变量系统，便于主题定制
- 丰富的工具类，覆盖布局、间距、边框、文本等场景
- 统一的过渡与动画效果，提升用户体验
- 标准化的基础样式重置，确保跨浏览器一致性
框架设计遵循 "移动优先" 原则，通过清晰的命名规范和模块化结构，使开发者能够快速构建一致、美观的界面。
2. 快速开始
引入框架
将框架 CSS 文件引入到 HTML 文档的
<head>中：
\<link rel="stylesheet" href="path/to/enhanced-css-framework.css">基础结构
一个典型的页面结构如下：
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>3. 全局变量
框架使用 CSS 变量（Custom Properties）定义全局样式，所有变量都在:root选择器下声明，便于统一修改和主题定制。
3.1 颜色系统
主题色
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;背景色
\--color-background: #ffffff; /\* 主要背景色 \*/
\--color-background-alt: #f9fafb; /\* 交替背景色 \*/
\--color-background-hover: #f3f4f6; /\* 悬停背景色 \*/
\--color-background-active: #e5e7eb; /\* 激活背景色 \*/
\--color-background-card: #ffffff; /\* 卡片背景色 \*/
\--color-background-modal: #ffffff; /\* 模态框背景色 \*/
\--color-background-overlay: rgba(0, 0, 0, 0.5); /\* 遮罩层背景色 \*/文本色
\--color-text: #000000; /\* 主要文本色 \*/
\--color-text-light: #374151; /\* 浅色文本 \*/
\--color-text-lighter: #6B7280; /\* 更浅文本 \*/
\--color-text-muted: #3d3d3d; /\* 次要文本 \*/
\--color-text-disabled: #9CA3AF; /\* 禁用文本色 \*/
\--color-text-inverse: #ffffff; /\* 深色背景上的文本 \*/功能色（状态色）
\--color-success: #52c41a; /\* 成功色 \*/
\--color-warning: #fa8c16; /\* 警告色 \*/
\--color-danger: #ff4d4f; /\* 危险/错误色 \*/
\--color-info: #4096ff; /\* 信息色 \*/中性色系
提供从--color-neutral-50（最浅）到--color-neutral-950（最深）的完整中性色阶，满足各种场景需求。
七色调全色系
包含红、橙、黄、绿、青、蓝、紫七个色系，每个色系都有从 50 到 950 的色阶变化，如：
/\* 红色系示例 \*/
\--color-red-50: #fff5f5;
\--color-red-100: #ffe3e3;
/\* ... 中间色阶省略 ... \*/
\--color-red-950: #5c0d12;3.2 字体系统
\--font-family-main: 'Helvetica Neue', Helvetica, 'PingFang SC', ...; /\* 主要字体 \*/
\--font-family-mono: 'SF Mono', Menlo, Monaco, ...; /\* 等宽字体（代码用） \*/
\--font-family-display: var(--font-family-main); /\* 标题字体 \*/
/\* 字体大小 \*/
\--font-size-xs: 10px;
\--font-size-sm: 12px;
\--font-size-md: 13px;
\--font-size-lg: 14px;
\--font-size-xl: 16px;
\--font-size-2xl: 18px;
\--font-size-3xl: 22px;
\--font-size-4xl: 26px;
\--font-size-5xl: 32px;
\--font-size-6xl: 40px;
/\* 字体权重 \*/
\--font-weight-light: 300;
\--font-weight-normal: 400;
\--font-weight-medium: 500;
\--font-weight-semibold: 600;
\--font-weight-bold: 700;
\--font-weight-extrabold: 800;
/\* 行高 \*/
\--line-height-xs: 1.2;
\--line-height-sm: 1.3;
\--line-height-md: 1.5;
\--line-height-lg: 1.6;
\--line-height-xl: 1.8;3.3 边框系统
/\* 边框宽度 \*/
\--border-width: 1px;
\--border-width-sm: 0.5px; /\* 细边框 \*/
\--border-width-lg: 2px; /\* 粗边框 \*/
/\* 边框圆角 \*/
\--border-radius: 4px;
\--border-radius-sm: 2px; /\* 小圆角 \*/
\--border-radius-lg: 6px; /\* 大圆角化 \*/
\--border-radius-xl: 8px;
\--border-radius-full: 9999px; /\* 全圆角（圆形） \*/
/\* 边框颜色 \*/
\--color-border: #ccc;
\--color-border-light: #e5e7eb; /\* 浅色边框 \*/
\--color-border-dark: #9CA3AF; /\* 深色边框 \*/
\--color-border-primary: var(--color-primary); /\* 主色边框 \*/3.4 间距系统
\--spacing-0: 0; /\* 零间距 \*/
\--spacing-xxs: 2px; /\* 极小间距 \*/
\--spacing-xs: 4px;
\--spacing-sm: 5px;
\--spacing-md: 10px;
\--spacing-lg: 20px;
\--spacing-xl: 25px;
\--spacing-2xl: 32px; /\* 更大间距 \*/
\--spacing-3xl: 40px;
\--spacing-4xl: 56px;
\--spacing-5xl: 72px;3.5 阴影系统
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>3.6 过渡与动画
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>4. 网格系统
框架采用 12 列网格布局，通过容器（container）、行（row）和列（col）的组合实现灵活的页面布局。
4.1 容器
容器用于包裹网格内容，提供居中对齐和内边距控制。
| 类名 | 说明 | 最大宽度 |
|---|---|---|
.container | 基础容器 | 1200px |
.container-sm | 小型容器 | 540px |
.container-md | 中型容器 | 720px |
.container-lg | 大型容器 | 960px |
.container-xl | 特大型容器 | 1140px |
.container-xxl | 超大型容器 | 1320px |
.container-fluid | 流体容器 | 100% 宽度 |
使用示例：
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>4.2 行
行（Row）用于包裹列（Column），并提供负外边距抵消列的内边距，确保布局对齐。
| 类名 | 说明 |
|---|---|
.row | 基础行 |
.row-gutter-sm | 小间距行（8px） |
.row-gutter-lg | 大间距行（24px） |
使用示例：
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>4.3 列
列是网格系统的核心，通过指定占比来控制宽度。框架采用 12 列系统，每列的宽度为100% / 12 * 列数。
基础列类：
| 类名 | 说明 | 宽度占比 |
|---|---|---|
.col-1 | 1 列宽 | 8.333% |
.col-2 | 2 列宽 | 16.666% |
| ... | ... | ... |
.col-12 | 12 列宽 | 100% |
.col | 自动分配宽度 | 平均分配 |
.col-auto | 自动宽度 | 由内容决定 |
使用示例：
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>4.4 响应式断点
框架提供 6 个响应式断点，支持在不同屏幕尺寸下调整布局：
| 断点前缀 | 断点值 | 说明 |
|---|---|---|
xs | 0 | 超小屏幕（手机，默认） |
sm | 576px | 小屏幕（平板竖屏） |
md | 768px | 中等屏幕（平板横屏） |
lg | 992px | 大屏幕（笔记本 / 小桌面） |
xl | 1200px | 特大屏幕（桌面） |
xxl | 1400px | 超特大屏幕（大桌面） |
响应式列类命名规则：.col-[断点前缀]-[列数]
使用示例：
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>4.5 列偏移
通过偏移类可以控制列的左侧留白，实现列的右移效果。
偏移类命名规则：.offset-[断点前缀]-[偏移列数]
使用示例：
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>4.6 列排序
通过排序类可以改变列的显示顺序，而不改变 HTML 结构。
排序类：
| 类名 | 说明 |
|---|---|
.order-first | 排在最前面 |
.order-last | 排在最后面 |
.order-[n] | 排在第 n 位（n 为 0-12） |
.order-[断点前缀]-first | 在指定断点排在最前面 |
.order-[断点前缀]-last | 在指定断点排在最后面 |
.order-[断点前缀]-[n] | 在指定断点排在第 n 位 |
使用示例：
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>5. 工具类
框架提供了丰富的工具类，用于快速设置元素样式，避免重复编写 CSS。
5.1 显示控制
| 类名 | 说明 |
|---|---|
.hidden | 隐藏元素（display: none） |
.invisible | 不可见但保留空间（visibility: hidden） |
.visible | 可见（visibility: visible） |
.sr-only | 仅屏幕阅读器可见 |
.d-none | 不显示 |
.d-block | 块级显示 |
.d-flex | Flex 布局显示 |
.d-sm-none | 在 sm 断点及以上不显示 |
.d-sm-block | 在 sm 断点及以上块级显示 |
.d-sm-flex | 在 sm 断点及以上 Flex 显示 |
| ... | 类似的 md/lg/xl/xxl 前缀类 |
使用示例：
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>5.2 布局工具
Flex 布局工具
| 类名 | 说明 |
|---|---|
.flex | 启用 Flex 布局 |
.inline-flex | 启用内联 Flex 布局 |
.flex-row | 水平方向排列（默认） |
.flex-row-reverse | 水平反向排列 |
.flex-col | 垂直方向排列 |
.flex-col-reverse | 垂直反向排列 |
.flex-wrap | 允许换行 |
.flex-nowrap | 不允许换行 |
.justify-start | 主轴起点对齐 |
.justify-end | 主轴终点对齐 |
.justify-center | 主轴居中对齐 |
.justify-between | 主轴两端对齐 |
.justify-around | 主轴均匀分布 |
.items-start | 交叉轴起点对齐 |
.items-end | 交叉轴终点对齐 |
.items-center | 交叉轴居中对齐 |
.items-baseline | 交叉轴基线对齐 |
.items-stretch | 交叉轴拉伸对齐 |
.flex-1 | Flex 项目占满剩余空间 |
.flex-auto | Flex 项目自动调整 |
.flex-none | Flex 项目不伸缩 |
使用示例：
\<!DOCTYPE html>
\<html lang="zh-CN">
\<head>
  \<meta charset="UTF-8">
  \<meta name="viewport" content="width=device-width, initial-scale=1.0">
  \<title>框架示例\</title>
  \<link rel="stylesheet" href="path/to/enhanced-css-framework.css">
\</head>
\<body class="bg-background">
  \<div class="container">
  \<div class="row">
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \<div class="col-md-6">
  \<!-- 内容 -->
  \</div>
  \</div>
  \</div>
\</body>
\</html>Grid 布局工具
| 类名 | 说明 |
|---|---|
.grid | 启用 Grid 布局 |
.grid-cols-2 | 2 列网格 |
.grid-cols-3 | 3 列网格 |
.grid-cols-4 | 4 列网格 |
.grid-cols-auto | 自动列数 |
.gap-0 至 .gap-2xl | 网格间距 |
使用示例：
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;定位工具
| 类名 | 说明 |
|---|---|
.position-static | 静态定位 |
.position-relative | 相对定位 |
.position-absolute | 绝对定位 |
.position-fixed | 固定定位 |
.position-sticky | 粘性定位 |
.top-0 | 顶部对齐 |
.right-0 | 右侧对齐 |
.bottom-0 | 底部对齐 |
.left-0 | 左侧对齐 |
5.3 间距工具
间距工具类用于快速设置元素的外边距（margin）和内边距（padding），命名规则如下：
- 前缀：
m-（margin）或p-（padding） - 方向：无方向（全方向）、
t（上）、b（下）、l（左）、r（右）、x（左右）、y（上下） - 大小：
0、xxs、xs、sm、md、lg、xl、2xl
常用间距类：
| 类名 | 说明 |
|---|---|
.m-0 | 全方向外边距为 0 |
.p-md | 全方向内边距为 md（10px） |
.mt-sm | 上外边距为 sm（5px） |
.mb-lg | 下外边距为 lg（20px） |
.px-xl | 左右内边距为 xl（25px） |
.py-2xl | 上下内边距为 2xl（32px） |
使用示例：
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;5.4 边框工具
| 类名 | 说明 |
|---|---|
.border | 基础边框 |
.border-0 | 无边框 |
.border-sm | 细边框 |
.border-lg | 粗边框 |
.border-dashed | 虚线边框 |
.border-primary | 主色边框 |
.border-success | 成功色边框 |
.border-warning | 警告色边框 |
.border-danger | 危险色边框 |
.border-t | 上边框 |
.border-r | 右边框 |
.border-b | 下边框 |
.border-l | 左边框 |
.border-t-0 | 无上边框 |
| ... | 类似的 r-0/b-0/l-0 |
圆角工具：
| 类名 | 说明 |
|---|---|
.rounded | 基础圆角 |
.rounded-0 | 无圆角 |
.rounded-sm | 小圆角 |
.rounded-lg | 大圆角化 |
.rounded-xl | 超大圆角 |
.rounded-full | 全圆角（圆形） |
.rounded-t | 上圆角 |
.rounded-r | 右圆角 |
.rounded-b | 下圆角 |
.rounded-l | 左圆角 |
使用示例：
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;5.5 文本工具
文本对齐
| 类名 | 说明 |
|---|---|
.text-left | 左对齐 |
.text-center | 居中对齐 |
.text-right | 右对齐 |
.text-justify | 两端对齐 |
文本颜色
| 类名 | 说明 |
|---|---|
.text-primary | 主色文本 |
.text-secondary | 辅助色文本 |
.text-text | 主要文本色 |
.text-text-light | 浅色文本 |
.text-muted | 次要文本 |
.text-disabled | 禁用文本色 |
.text-inverse | 反色文本（用于深色背景） |
.text-success | 成功色文本 |
.text-warning | 警告色文本 |
.text-danger | 危险色文本 |
.text-info | 信息色文本 |
文本大小
| 类名 | 说明 | 对应变量 |
|---|---|---|
.text-xs | 超小文本 | --font-size-xs (10px) |
.text-sm | 小文本 | --font-size-sm (12px) |
.text-md | 中等文本 | --font-size-md (13px) |
.text-lg | 大文本 | --font-size-lg (14px) |
.text-xl | 超大文本 | --font-size-xl (16px) |
.text-2xl 至 .text-5xl | 更大文本 | 对应变量逐步增大 |
字体权重
| 类名 | 说明 | 对应变量 |
|---|---|---|
.font-light | 轻量 | --font-weight-light (300) |
.font-normal | 正常 | --font-weight-normal (400) |
.font-medium | 中等 | --font-weight-medium (500) |
.font-semibold | 半粗体 | --font-weight-semibold (600) |
.font-bold | 粗体 | --font-weight-bold (700) |
.font-extrabold | 特粗体 | --font-weight-extrabold (800) |
其他文本工具
| 类名 | 说明 |
|---|---|
.text-underline | 下划线 |
.text-underline-hover | hover 时显示下划线 |
.text-no-underline | 无下划线 |
.text-uppercase | 大写 |
.text-lowercase | 小写 |
.text-capitalize | 首字母大写 |
使用示例：
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;5.6 背景工具
背景工具类用于快速设置元素的背景色，命名规则为.bg-[颜色名称]。
常用背景类：
| 类名 | 说明 |
|---|---|
.bg-primary | 主色背景 |
.bg-primary-light | 主色浅色背景 |
.bg-background | 主要背景色 |
.bg-background-alt | 交替背景色 |
.bg-background-hover | 悬停背景色 |
.bg-success | 成功色背景 |
.bg-success-bg | 成功色浅色背景 |
.bg-warning | 警告色背景 |
.bg-warning-bg | 警告色浅色背景 |
.bg-danger | 危险色背景 |
.bg-danger-bg | 危险色浅色背景 |
.bg-neutral-[n] | 中性色背景（n 为 50-900） |
使用示例：
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;5.7 过渡与动画工具
过渡工具
| 类名 | 说明 |
|---|---|
.transition | 基础过渡效果 |
.transition-none | 无过渡 |
.transition-fast | 快速过渡（150ms） |
.transition-normal | 正常过渡（300ms） |
.transition-slow | 慢速过渡（500ms） |
.transition-color | 仅颜色过渡 |
.transition-bg | 仅背景色过渡 |
.transition-border | 仅边框过渡 |
.transition-transform | 仅变换过渡 |
.transition-shadow | 仅阴影过渡 |
动画工具
| 类名 | 说明 |
|---|---|
.animate-fade-in | 淡入动画 |
.animate-fade-out | 淡出动画 |
.animate-slide-up | 上滑动画 |
.animate-slide-down | 下滑动画 |
.animate-slide-left | 左滑动画 |
.animate-slide-right | 右滑动画 |
.animate-bounce | 弹跳动画 |
.animate-pulse | 脉冲动画 |
.animate-shake | 抖动动画 |
.animate-spin | 旋转动画 |
.animate-zoom-in | 放大动画 |
.animate-zoom-out | 缩小动画 |
使用示例：
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;5.8 其他工具
| 类名 | 说明 |
|---|---|
.shadow | 基础阴影 |
.shadow-sm | 小阴影 |
.shadow-lg | 大阴影 |
.shadow-xl | 超大阴影 |
.shadow-primary | 主色阴影 |
.shadow-hover | hover 时显示更大阴影 |
.w-100 | 宽度 100% |
.h-100 | 高度 100% |
.w-auto | 宽度自动 |
.h-auto | 高度自动 |
.max-w-100 | 最大宽度 100% |
.overflow-hidden | 溢出隐藏 |
.overflow-auto | 溢出自动滚动 |
.cursor-pointer | 鼠标指针为手型 |
.cursor-not-allowed | 鼠标指针为禁止 |
.opacity-0 | 透明度 0 |
.opacity-50 | 透明度 50% |
.opacity-100 | 透明度 100% |
.zoom-hover | hover 时轻微放大 |
使用示例：
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;6. 示例
6.1 基础布局示例
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;6.2 响应式布局示例
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;6.3 组件样式示例
按钮组件
\--color-primary: #007BFF; /\* 主色调 \*/
\--color-primary-light: #3395FF; /\* 主色浅变体 \*/
\--color-primary-dark: #0056D2; /\* 主色深变体 \*/
\--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/
\--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/
\--color-secondary: #444; /\* 辅助色 \*/
\--color-secondary-light: #666;
\--color-secondary-dark: #222;表单组件
\--color-background: #ffffff; /\* 主要背景色 \*/
\--color-background-alt: #f9fafb; /\* 交替背景色 \*/
\--color-background-hover: #f3f4f6; /\* 悬停背景色 \*/
\--color-background-active: #e5e7eb; /\* 激活背景色 \*/
\--color-background-card: #ffffff; /\* 卡片背景色 \*/
\--color-background-modal: #ffffff; /\* 模态框背景色 \*/
\--color-background-overlay: rgba(0, 0, 0, 0.5); /\* 遮罩层背景色 \*/提示框组件
\--color-background: #ffffff; /\* 主要背景色 \*/
\--color-background-alt: #f9fafb; /\* 交替背景色 \*/
\--color-background-hover: #f3f4f6; /\* 悬停背景色 \*/
\--color-background-active: #e5e7eb; /\* 激活背景色 \*/
\--color-background-card: #ffffff; /\* 卡片背景色 \*/
\--color-background-modal: #ffffff; /\* 模态框背景色 \*/
\--color-background-overlay: rgba(0, 0, 0, 0.5); /\* 遮罩层背景色 \*/以上就是增强版 CSS 框架的详细使用文档。通过灵活运用框架提供的网格系统和工具类，可以快速构建出美观、一致且响应式的网页界面。如需进一步定制，可以通过修改全局变量来调整主题样式，无需修改工具类代码。
（注：文档部分内容可能由 AI 生成）