CSS box-reflect 属性

定義と用法

box-reflect 属性は要素の反射効果を作成するために使用されます。

box-reflect 属性の値は次の通りです：

• below（下方）
• above（上方）
• left（左側）
• right（右側）

注意：box-reflect 属性は非標準属性であり、使用する必要があります -webkit- 接頭辞。

例

例1

画像の下に反射効果を追加します：

img {
  -webkit-box-reflect: below;
}

実際に試してみてください

例2

box-reflect 属性は任何可见的HTML要素に適用できます。以下の例では、<p>タグの下に反射効果を作成します：

p {
  -webkit-box-reflect: below;
}

実際に試してみてください

例3

box-reflect 属性は双値文法でも使用できます。以下の例では、画像の下に反射効果を作成し、70pxの距離を設定します：

img {
  -webkit-box-reflect: below 70px;
}

実際に試してみてください

例4

box-reflect 属性は三値文法でも使用できます。以下の例では、画像の下に反射効果を作成し、10pxの距離を設定し、徐々にフェードアウトします：

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

実際に試してみてください

CSS 文法

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示します。

前缀 -webkit- 付きの数字は、その前缀が最初にサポートされたバージョンを示します。