-webkit-box-reflect

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

-webkit-box-reflect は CSS のプロパティで、要素の内容を特定の方向に反射させることができます。

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: unset;

警告: この機能はウェブサイトで使うためのものではありません。ウェブで反射効果を実現する上で、標準の方法は CSS の element() 関数を使用することです。

構文

値

above, below, right, left

どの方向に反射するかを示すキーワードです。

<length>

反射の大きさを示します。

<image>

反射に適用されるマスクを記述します。

公式定義

初期値none
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

Error: could not find syntax for this item

仕様書

標準には含まれていません。反射効果を CSS で実現する標準の方法は、 CSS の element() 関数を使用することです。

ブラウザーの互換性

BCD tables only load in the browser

関連情報