-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>-
描述要应用于倒影的蒙版。
形式定义
形式语法
-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>
规范
不属于任何标准。在 CSS 中，实现倒影效果的标准方法是使用 CSS 的 element() 函数。
浏览器兼容性
Loading…