-webkit-box-reflect

非标准：此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都有效。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

-webkit-box-reflect CSS 属性允许您沿一个特定方向反射元素的内容。

语法

css

/* Direction values */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/* Offset value */
-webkit-box-reflect: below 10px;

/* Mask value */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/* Global values */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: revert;
-webkit-box-reflect: revert-layer;
-webkit-box-reflect: unset;

值

above, below, right, left: 是指示反射发生方向的关键字。
<length>: 指示反射的大小。
<image>: 描述要应用于反射的蒙版。

正式定义

初始值	`none`
应用于	所有元素
继承	否
计算值	按指定
动画类型	discrete

正式语法

-webkit-box-reflect =
  [ above | below | right | left ]? <length>? <image>?

规范

不属于任何标准。在 CSS 中进行反射的标准方法是使用 CSS element() 函数。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

Apple 文档。
Webkit 规范。