CSS3 box-reflect attribute

Syntax:

Box-reflect: includes 3 values.

1. Direction defines the direction. Values include above, below, left and right.

Above:

Specify the reflection on top of the object

Below:

Specifies that the reflection is below the object

Left:

Specifies that the reflection is on the left side of the object

Right:

Specifies that the reflection is on the right side of the object

2. Offset defines the distance of the reflection offset, including a numeric value or percentage, where the percentage is determined according to the size of the object. The default is 0.

The 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-p_w_picpath defines a mask image that covers the projected area. If the parameter value is omitted, the default is the unmasked image.

Value:

None: unmasked images:

Specify the mask image using an absolute or relative address.

Create a mask image using a linear gradient.

Use a radial (radioactive) gradient to create a mask image.

Use repeated linear gradients to create a back mask image.

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

Description:

Sets or retrieves object reflection.

The corresponding script feature is boxReflect.

As follows:

12 3 4 5 untitled document 6 7. Box {8 width:200px; 9 height:200px;10 background:-webkit-linear-gradient (left,red,yellow,green); 11 transform:scale (- 1 transform:scale 1); 12-webkit-box-reflect:below 10px-webkit-linear-gradient (transparent,transparent 50% recorder rgba (0pen0penol .8)); 13} 14 15 16 17 18 19 20

The above is a reflection of a linear gradient of color, and our pictures can also be used as reflection effects.

Img {- webkit-box-reflect:below 10px-webkit-linear-gradient (transparent,transparent 50% recorder rgba (0meme 0rem .8));}