-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> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
规范
不属于任何标准。在 CSS 中，实现倒影效果的标准方法是使用 CSS 的 element() 函数。
浏览器兼容性
Loading…