TECH I.S.

CSS画像反射


この章では、画像を反射する方法を学びます。



CSS画像の反射

box-reflectプロパティは、イメージの反射を作成するために使用されます。 box-reflectプロパティの値は次のとおりです。belowaboveleft、またright.

ブラウザのサポート

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

-webkit- が後に続く数字は、プレフィックスで機能した最初のバージョンを指定します。

プロパティ

ボックスリフレクト 4.0 -ウェブキット- 79.0 -ウェブキット- サポートされていません 4.0 -ウェブキット- 15.0 -ウェブキット-


ここでは、画像の下に反射が必要です。

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

自分で試してみる»

ここでは、画像の右側に反射が必要です。

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

自分で試してみる»


CSS 反射オフセット

イメージと反射の間のギャップを指定するには、ギャップのサイズをbox-reflect財産。

ここでは、20pxのオフセットで、画像の下に反射が必要です。

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

自分で試してみる»


グラデーションを使用したCSS反射

反射にフェードアウト効果を作成することもできます。

反射にフェードアウト効果を作成する:

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

自分で試してみる»



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細