# CSS

**Repository Path**: yuluomoshang/css

## Basic Information

- **Project Name**: CSS
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 25
- **Created**: 2025-05-15
- **Last Updated**: 2026-01-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# CSS 特效示例合集

本项目是一系列 CSS 特效的展示示例，包括边框、背景、渐变、变换、过渡、动画等常用 CSS 属性的使用方法和效果展示。

## 目录结构

- `01. border/`: 边框相关特效，包括圆角、九宫格边框、阴影边框等。
- `02. css background/`: 展示背景图像的重复、定位、大小、裁剪、固定等特性。
- `03. css gradient/`: CSS 渐变背景示例，包括线性渐变、径向渐变、锥形渐变。
- `04. css transform/`: 使用 CSS 进行 2D/3D 转换的效果展示。
- `05. css transition/`: 展示 CSS 过渡动画效果。
- `06. css animation/`: CSS 动画的示例代码。
- `07. css flex/`: Flexbox 布局的演示，包括主轴方向、对齐方式、伸缩比例等。
- `08. css grid/`: CSS Grid 布局的示例展示。
- `11. css mask/`: 展示 CSS 遮罩效果。
- `12. css clip-path/`: 展示 CSS 裁剪路径效果。
- `13. css box-reflect/`: 展示 CSS 反射效果。
- `14. css text/`: 文本样式展示。
- `16. css houdini/`: Houdini API 的 CSS Paint、Typed OM 和 Property 示例。

## 功能说明

### 边框（Border）
- `border-radius`: 实现圆角边框。
- `border-image`: 使用九宫格图片设置边框。
- `box-shadow`: 添加阴影边框效果。

### 背景（Background）
- `background-repeat`: 设置背景图像的重复方式。
- `background-position`: 设置背景图像的初始位置。
- `background-size`: 设置背景图像的大小。
- `background-clip`: 裁剪背景图像区域。
- `background-attachment`: 设置背景图像是否随滚动移动。

### 渐变（Gradient）
- `linear-gradient`: 创建线性渐变背景。
- `radial-gradient`: 创建径向渐变背景。
- `conic-gradient`: 创建锥形渐变背景。

### 变换（Transform）
- 2D/3D 平移、旋转、缩放。
- `transform-origin`: 设置变换原点。
- 实际案例展示变换效果。

### 过渡（Transition）
- 展示 CSS 过渡动画。
- 包括过渡事件的使用。

### 动画（Animation）
- 使用 `@keyframes` 创建动画。
- 展示 CSS 动画的基本用法。

### Flex 布局（Flexbox）
- 展示 Flex 容器和子元素的排列方式。
- 包括主轴方向、对齐方式、伸缩比例、间距等特性。

### Grid 布局
- `grid-template-columns`: 设置网格列布局。
- `grid-auto-flow`: 控制自动排列的网格项。
- 展示复杂网格布局和自动列特性。

### 遮罩（Mask）
- 使用 CSS 遮罩图像实现蒙版效果。

### 裁剪路径（Clip-path）
- 使用 `clip-path` 对元素进行裁剪。

### 反射（Box-Reflect）
- 展示 CSS `box-reflect` 属性的效果。

### CSS Houdini
- `CSS Paint API`: 自定义绘制背景。
- `CSSTypedOM`: 使用 JavaScript 操作 CSS 属性。
- `@Property`: 自定义 CSS 属性。

## 使用方法

1. 打开对应目录下的 `index.html` 或 `demo.html` 文件即可查看效果。
2. 可以结合 CSS 文件（如存在）来查看样式定义。
3. 对于 Houdini 示例，确保浏览器支持并启用相关特性。

## 贡献

欢迎提交 Pull Request 来丰富 CSS 示例内容，或修复示例中的问题。

## 协议

本项目遵循 MIT 协议，详细请参考具体文件。