CSS リフレクション

前に言った事

CSS リフレクションは現在 Chrome ブラウザと Safari ブラウザでのみサポートされており、-webkit- プレフィックスを追加する必要があります。この記事では、CSSリフレクションbox-reflect

syntaxについて詳しく紹介します

-webkit-box-reflect

初期値: none

適用対象: ブロックレベル要素(inline-block含む)

継承: なし

値: なし | <direction></direction> <offset></offset>? <direction> (必須) はボックスの方向を示します。リフレクトは反射を生成します。これには主に次の値が含まれます: <direction> <offset>? <mask-box-image>?

  <direction>(必须)表示box-reflect生成倒影的方向，主要包括以下几个值：

above:表示生成的倒影在对象(原图)的上方；
below:表示生成的倒影在对象(原图)的下方；
left:表示生成的倒影在对象(原图)的左侧；
right:表示生成的倒影在对象(原图)的右侧；

  <offset>(可选)用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值

  <mask-box-image>rrreee

<offset> (オプション) は、生成される反射を設定するために使用されます。 オブジェクト (元の画像) とオブジェクト (元の画像) の間の距離) は、固定ピクセル値またはパーセンテージ値にすることができます

<mask-box-image> (オプション) を使用して設定します。反射のマスキング効果は、背景画像または生成された背景画像にすることができます。 by gradient🎜🎜 CSS リフレクション関連の記事をもっと知りたい場合は、PHP 中国語 Web サイトに注目してください。 🎜