# css倒影

**Repository Path**: lzcq/css_reflection

## Basic Information

- **Project Name**: css倒影
- **Description**: css3 倒影特效，box-reflect
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-08-02
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# css倒影 box-reflect

### 项目介绍
css3 倒影特效，box-reflect

### 语法
box-reflect : direction（倒影位置），offset（间隔），mask-box-image（遮罩图像）

```
-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
```

简单用法：
```
/*下倒影*/
box-reflect:below;
```
### 参数
#### direction 倒影位置（五个值，默认为none）
##### 1. none：
无倒影
##### 2. above：
指定倒影在对象的上边
##### 3. below：
指定倒影在对象的下边
##### 4. left：
指定倒影在对象的左边
##### 5. right：
指定倒影在对象的右边

#### offset 倒影与对象之间的间隔(两个值，均可为负值)
##### 1. length：
长度值，单位为px，为0时可省略px
##### 2. percentage：
百分比

#### mask-box-image 定义遮罩图像，该图像将覆盖投影区域（六个值）
##### 1. none:
默认值，无遮罩图像
##### 2. url:
使用绝对或相对地址指定遮罩图像，指定图像也会发生翻转
##### 3. linear-gradient:
使用线性渐变创建遮罩图像。
##### 4. radial-gradient:
使用径向(放射性)渐变创建遮罩图像。
##### 5. repeating-linear-gradient:
使用重复的线性渐变创建背遮罩像。
##### 6. repeating-radial-gradient:
使用重复的径向(放射性)渐变创建遮罩图像。

### 说明
##### 1. 假设定义了 <mask-box-image>，<offset>必须指定，否则可以省略
##### 2. 倒影不占据文档流，倒影之后的元素需调试所在位置大小。
##### 3. 适用于所有元素