-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
関連情報
- Apple のドキュメント
- Webkit の仕様書.
- Lea Verou's article on reflection using CSS features on the standard track.