Box-reflect is also a reflection effect.

- its - box - reflect: none | < direction > < offset >? <mask-box-image>? box-reflect: none | <direction> <offset>? <mask-box-image>?Copy the code

Attribute description: None: the default value, indicating no reflection.

Direction: The direction in which the reflection is generated. Above, below, left, and right represent up, down, left, and right respectively.

Offset: The interval between the reflection and the object. The value can be a number, percentage, or negative value.

Mask-box-image: reflects the effect of the mask layer. The value can be: None: unmasked image URL: specifies the mask image using an absolute or relative address. Linear-gradient: Creates a mask image using a linear gradient. Radial gradient: Creates a mask image using a radial (radioactive) gradient. Repeating-linear-gradient: Create a back mask image using repeated linear gradients. Repeating-radial -gradient: Create mask images using repeated radial (radioactive) gradients.

-webkit-box-reflect:below 0px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8)); -webkit-box-reflect:below 0px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,.8));

Effect: