w3study.net

{{Non-standard_Header}}

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

语法

/* 方向值 */
-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
  • : 这些关键字用于指示倒影生成的方向。
• {{CSSxRef("<length>")}}
  • : 表示倒影的大小。
• {{CSSxRef("<image>")}}
  • : 描述要应用于倒影的蒙版。

形式定义

{{CSSInfo}}

形式语法

{{CSSSyntaxRaw(-webkit-box-reflect = [ above | below | right | left ]? <length>? <image>?)}}