View in EnglishAlways switch to English

-webkit-box-reflect

非标准: 该特性尚未标准化。我们不建议在生产环境中使用非标准特性，因为它们在浏览器中的支持有限，且可能发生变化或被移除。不过，在没有标准选项的特定情况下，它们可以作为合适的替代方案。

CSS 属性-webkit-box-reflect 可以让你在一个特定方向上为元素的内容生成倒影。

语法

css

/* 方向值 */-webkit-box-reflect: above;-webkit-box-reflect: below;-webkit-box-reflect: left;-webkit-box-reflect: right;/* 偏移量值 */-webkit-box-reflect: below 10px;/* 蒙版值 */-webkit-box-reflect: below 0 linear-gradient(transparent, white);/* 全局值 */-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`
适用元素	所有元素
是否是继承属性	否
计算值	as specified
动画类型	离散值

形式语法

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

<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)

<image-set()> =
image-set(<image-set-option>#)

<cross-fade()> =
cross-fade(<cf-image>#)

<element()> =
element(<id-selector>)

<image-tags> =
ltr|
rtl

<image-src> =
<url>|
<string>

<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?

<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?

<id-selector> =
<hash-token>