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