Reflection box reflect

Time:2020-11-21

Write compatible:

-webkit-box-reflect:below 3px -webkit-(repeating)linear/redial-gradient(…);

1. Write the direction to define the direction

About: reflected on the top of its object

Below: is reflected below its object

Left: left

Right: right

2. Offset defines the distance between the object and the reflection. The default value is 0. The values include PX and percentage. The percentage is determined according to the size of the object. Both PX and percentage can be negative.

  • A length value is used to define the interval between the reflection and the object. Can be negative

  • The interval between the reflection and the object is defined as a percentage. Can be negative

3. Mask box images definition

  • none:

    Unshaded image

  • Use absolute or relative addresses to specify mask images.

  • Use a linear gradient to create a mask image.

  • Use radial (radioactive) gradients to create a mask image.

  • Creates a back mask image with a repeated linear gradient.

Create a mask image using a repeated radial (radioactive) gradient.

  As we all know, people who have played with the front-end must feel very common to 3D photo albums, but after using the reflection label, you can always give a bright visual impact. More than one label can double the effect of your web page