diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-06 00:26:05 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-13 22:52:57 +0900 |
commit | 9d21b2eff5b3811540d818dce7f9d7df230ef2f3 (patch) | |
tree | 5ca558e7d297db1fe99a0e114a33ffcabd7155ef /files/ja/web/css/-webkit-box-reflect | |
parent | 48e8f90e628c15e1678699454a27d74d48f0fd95 (diff) | |
download | translated-content-9d21b2eff5b3811540d818dce7f9d7df230ef2f3.tar.gz translated-content-9d21b2eff5b3811540d818dce7f9d7df230ef2f3.tar.bz2 translated-content-9d21b2eff5b3811540d818dce7f9d7df230ef2f3.zip |
2021/12/05 時点の英語版に同期
Diffstat (limited to 'files/ja/web/css/-webkit-box-reflect')
-rw-r--r-- | files/ja/web/css/-webkit-box-reflect/index.md | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/files/ja/web/css/-webkit-box-reflect/index.md b/files/ja/web/css/-webkit-box-reflect/index.md new file mode 100644 index 0000000000..7ebc18a83b --- /dev/null +++ b/files/ja/web/css/-webkit-box-reflect/index.md @@ -0,0 +1,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/). |