CSS reflection

Previous words

 CSS reflection is currently only supported by chrome and safari browsers, and the -webkit- prefix needs to be added. This article will introduce CSS reflection box-reflect in detail

Syntax

-webkit-box-reflect

Initial value: none

Applies to: block-level elements (including inline-block)

Inheritance: None

Value: none | <direction> <offset>? <mask-box-image>?

<direction>(required) indicates that box-reflect generates reflection Direction, mainly includes the following values:

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

<offset>(optional) is used to set the distance between the generated reflection and the object (original image). Its value can be It is a fixed pixel value, or it can be a percentage value.

<mask-box-image> (optional) is used to set the reflection mask effect, which can be a background image, or It can be a background image generated by gradient