blob: 7ebc18a83b458cda1cd1d502422951717855e040 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
---
title: '-webkit-box-reflect'
slug: Web/CSS/-webkit-box-reflect
tags:
- '-webkit-box-reflect'
- CSS
- CSS プロパティ
- CSS:WebKit 拡張
- 標準外
- リファレンス
- recipe:css-property
browser-compat: css.properties.-webkit-box-reflect
translation_of: Web/CSS/-webkit-box-reflect
---
{{CSSRef}}{{Non-standard_Header}}
**`-webkit-box-reflect`** は [CSS](/ja/docs/Web/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;
```
> **Warning:** この機能は**ウェブサイトで使うためのものではありません**。ウェブで反射効果を実現する上で、標準の方法は CSS の {{CSSxRef("element()", "element()")}} 関数を使用することです。
## 構文
### 値
- `above`_,_ `below`_,_ `right`_,_ `left`
- : どの方向に反射するかを示すキーワードです。
- {{CSSxRef("<length>")}}
- : 反射の大きさを示します。
- {{CSSxRef("<image>")}}
- : 反射に適用されるマスクを記述します。
## 公式定義
{{CSSInfo}}
## 形式文法
{{CSSSyntax}}
## 仕様書
標準には含まれていません。反射効果を CSS で実現する標準の方法は、 CSS の {{CSSxRef("element()", "element()")}} 関数を使用することです。
## ブラウザーの互換性
{{Compat}}
## 関連情報
- Apple の[ドキュメント](http://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16)
- Webkit の[仕様書](https://www.webkit.org/blog/182/css-reflections/).
- Lea Verou's article on reflection using [CSS features on the standard track](http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/).
|
