CSS box-reflect 属性
定义和用法
box-reflect 属性用于创建元素的反射。
box-reflect 属性的值可以是：below、above、left 或 right。
注意：box-reflect 属性是非标准属性，必须使用 -webkit- 前缀。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
后跟-webkit-的数字指定了使用前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| box-reflect | 4.0 -webkit- | 79.0 -webkit- | 不支持 | 4.0 -webkit- | 15.0 -webkit- |
CSS 语法
box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;
属性值
| 属性值 | 描述 | 演示 |
|---|---|---|
| none | 默认值。不显示反射。 | 演示 ❯ |
| below | 在元素下方创建反射。 | 演示 ❯ |
| above | 在元素上方创建反射。 | 演示 ❯ |
| left | 在元素左侧创建反射。 | 演示 ❯ |
| right | 在元素右侧创建反射。 | 演示 ❯ |
| position offset | 双值语法 - position 设置元素下方、上方、左侧或右侧的反射。 - offset 设置反射的距离。距离以 px、pt、cm 等设置。默认值为 0。 阅读关于长度单位 |
演示 ❯ |
| position offset gradient | 三值语法 - position 设置元素下方、上方、左侧或右侧的反射。 - offset 设置反射的距离。距离以 px、pt、cm 等设置。默认值为 0。 阅读关于长度单位 - gradient 设置反射的过渡，即淡出效果。 |
演示 ❯ |
| initial | 将此属性设置为其默认值。 阅读关于initial | |
| inherit | 从其父元素继承此属性。 阅读关于inherit |
更多示例
示例
box-reflect 属性值可以使用双值语法设置。此处，反射位于 img 元素下方，但距离为 70px
img {
-webkit-box-reflect: below 70px;
}
亲自试一试 »
示例
box-reflect 属性值也可以使用三值语法设置。此处，反射位于 img 元素下方，距离为 10px，并逐渐淡出
img {
-webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
亲自试一试 »
相关页面
CSS 教程： CSS 图像反射
