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

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

<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() 関数を使用することです。

ブラウザーの互換性

関連情報

• Apple の ドキュメント
• Webkit の 仕様書.
• Lea Verou's article on reflection using CSS features on the standard track.