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 图像反射
