CSS画像反射
この章では、画像を反射する方法を学びます。
CSS画像の反射
box-reflectプロパティは、イメージの反射を作成するために使用されます。
box-reflectプロパティの値は次のとおりです。below、above、left、またright.
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
-webkit- が後に続く数字は、プレフィックスで機能した最初のバージョンを指定します。
|
プロパティ |
|||||
|---|---|---|---|---|---|
| ボックスリフレクト | 4.0 -ウェブキット- | 79.0 -ウェブキット- | サポートされていません | 4.0 -ウェブキット- | 15.0 -ウェブキット- |
例
CSS 反射オフセット
イメージと反射の間のギャップを指定するには、ギャップのサイズをbox-reflect財産。
グラデーションを使用したCSS反射
反射にフェードアウト効果を作成することもできます。
例
反射にフェードアウト効果を作成する:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。