Steps to implement reflection using CSS3

We will use the element of reflection when achieving some effects. This article will bring you the most complete implementation steps of using CSS3 to create reflections. Let us take a look below.

box-reflect: none | <direction> ?

none: This value is box-reflect Default value, indicating no reflection effect;

direction: This value indicates the direction in which box-reflect generates reflection, mainly including the following values:

above: indicates that the generated reflection is in Above the object (original image);

below: indicates that the generated reflection is below the object (original image);

left: indicates the generated reflection On the left side of the object (original image);

right: indicates that the generated reflection is on the right side of the object (original image);

offset: used to set the generated reflection The distance between the reflection and the object (original image), its value can be a fixed pixel value or a percentage value, such as:

Use the length value to set the distance between the generated reflection and the original image Spacing, as long as it is the length unit in CSS, this value can use negative values;

Use percentage to set the spacing between the generated reflection and the original image, this value can also use negative values

mask-box-image: Used to set the mask effect of reflection, which can be the background picture or the background image generated by gradient.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the transform gradient attribute in Css3

Steps to implement the effect of making dynamic switches with Css3

How to use CSS3 attribute selectors to replace the role of JS

The above is the detailed content of Steps to implement reflection using CSS3. For more information, please follow other related articles on the PHP Chinese website!