Reflection (Box-reflect)

Box-reflect:

Syntax: Box-reflect:none | <direction> <offset>? <Mask-box-image> because it is not a standard, you should add the browser's private properties when using it .

None: Default value, indicating no reflection;

Direction: The direction of reflection generation, divided into the upper and lower, the value of Above,below,left and right respectively

Offset: Indicates the distance between the generated reflection and the original image

Mask-box-image: Used to set the mask effect of reflection, can be a background image, or it can be a gradient generated background image;

Example:

The results are as follows: You can find that the image above only a little reflection, not all, this is because, in the image to add reflection, it is necessary to give the direction of reflection to add enough position. Otherwise, only the picture will be generated, not fully rendered. At this point, add a 100px fill to the body:

Then you can see the reflection of the picture. Of course, the same is true in other directions.

Here's an example of right, and you can see that the resulting reflection fits perfectly with the picture. This time, add the second attribute offset to Box-reflect

The effect is as follows: You can see that there is a gap between the images, which is the offset property

Adds a matte effect to the reflection (with an example of a downward reflection);

We can do this in two ways, the first is the background image of the gradient, and the second is the external background image.

Take the gradient as an example, no good background image is found; The downward reflection effect is as follows:

Add a third gradient property on the original basis

The effect is as follows:

It should be noted that in the setting of the gradient, there must be 2 parameters before, otherwise does not take effect, in addition, radial gradient is not currently supported

Reflection (Box-reflect)