CSS3を使用してリフレクションを実装する手順

いくつかの効果を実現するときにリフレクションの要素を使用します。この記事では、CSS3 を使用してリフレクションを作成する最も完全な実装手順を説明します。

box-reflect: none | この値は、box-reflect によって生成される反射の方向を示します。主に次の値が含まれます: above: 生成された反射が

オブジェクト

(元の画像) の上にあることを示します。

below: 生成された反射がオブジェクト (元の画像) の上にあることを示します );

left: 生成された反射がオブジェクト (元の画像) の左側にあることを示します。生成された反射はオブジェクト (元の画像) の右側にあります。

オフセット: 生成された反射とオブジェクト (元の画像) の間の距離を設定します。値は固定ピクセル値またはパーセンテージ値です。

長さの値を使用して、生成された反射と元の画像の間の距離を設定します。CSS の長さの単位である限り、この値に負の値を使用できます。

パーセントを使用して、生成された反射と元の画像の間の距離、この値に負の値を使用することもできます

mask-box-image: 反射マスク効果を設定するには、背景

画像または生成されたグラデーションを使用できます背景画像

。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍: CSS3 で変換勾配属性を使用する方法

Css3 で動的スイッチの効果を実装する手順

CSS3 属性セレクターを使用してロールを置き換える方法JSの

以上がCSS3を使用してリフレクションを実装する手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。