目录

CSS box-reflect 属性

❮上一节完整的CSS参考下一节❯

示例

在图片下方添加反射：

img {
-webkit-box-reflect: below;
}

亲自试一试 »

定义和用法

这个box-reflect属性用于创建元素的反射。

的值box-reflect属性可以是：below,above,left，或者right。

笔记：这个box-reflect属性是非标准的，必须用-webkit-字首。

展示演示❯

默认值：	没有任何
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.webkitBoxReflect="below"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

后面跟着的数字-webkit-指定使用前缀的第一个版本。

Property
box-reflect	4.0 -webkit-	79.0 -webkit-	Not supported	4.0 -webkit-	15.0 -webkit-

CSS 语法

box-reflect: none|below|above|left|right| position offset gradient|initial|inherit;

属性值

Property Value	Description	Demo
none	Default value. No reflection is displayed.	Demo ❯
below	Creates a reflection below the element.	Demo ❯
above	Creates a reflection above the element.	Demo ❯
left	Creates a reflection to the left of the element.	Demo ❯
right	Creates a reflection to the right of the element.	Demo ❯
position offset	Two value syntax: - position sets reflection below, above, left, or right of the element. - offset sets the distance to the reflection. Distance is set in px, pt, cm, etc. Default value is 0. Read about length units	Demo ❯
position offset gradient	Three value syntax: - position sets reflection below, above, left, or right of the element. - offset sets the distance to the reflection. Distance is set in px, pt, cm, etc. Default value is 0. Read about length units - gradient sets a transition for the reflection, i.e. a fading effect.	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

这个box-reflect可以在任何可见的 HTML 元素上设置属性。这里，反射是在 p 标签下面进行的：

p {
-webkit-box-reflect: below;
}

亲自试一试 »

示例

这个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 图片反射

❮上一节完整的CSS参考下一节❯