Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use CSS3's box-reflect to make reflection effect". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use CSS3's box-reflect to make reflection effect".

Compatibility

Since it is an attribute of CSS3, of course we want to look at compatibility: click to view

Next, let's see how box-reflect is used.

The syntax is as follows:

-webkit-box-reflect:none |?? Box-reflect:none |?

Attribute description:

None: this value is the default value, indicating no reflection

Direction: direction in which the reflection is generated

Above: specify reflection on top of object below: specify reflection on the bottom of object left: specify reflection on the left side of object right: specify reflection on the right side of object

Offset: interval between picture and reflection

Length: use the length value to define the interval between the reflection and the object. Can be a negative percentage: defines the interval between the reflection and the object as a percentage. Can be a negative value

Mask-box-image: used to set the masking effect of reflection

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: creates a back mask image using repeated linear gradients. Repeating-radial-gradient: creates a mask image using repeated radial (radioactive) gradients.

We can't just talk on paper. We still have to see the effect through examples.

The direction of the reflection

In this example, I got three img:

Css is as follows:

.box1, .box2, .box3 {width:120px; float:left; margin-right:180px;} img {width:100%;} .box1 img {- webkit-box-reflect:right; box-reflect:right;} .box2 img,.box3 img {- webkit-box-reflect: above; box-reflect:above;} .box3 {padding-top:200px;}

The effect picture is as follows:

There is a question here. The images in box2 and box3 both have box-reflect:above set, and both generate projections at the top, so why can't box2 see the effect? The reason is that I set padding-top:200px for box3, but box2 does not, initially because there is no room for it to display the resulting reflection.

The distance between the reflection and the object

Now that we know the direction in which the reflection is generated, let's look at the second attribute and look at the example:

Still use three pictures, but change the style:

.box1 img {- webkit-box-reflect:below 30px; box-reflect:below 30px;} .box2 img {- webkit-box-reflect:below-30px; box-reflect:below-30px;} .box3 img {- webkit-box-reflect:below 5%; box-reflect:below 5%;}

The effect picture is as follows:

Next let's learn about the last attribute.

Masking effect

(1) use gradient to add masking effect to reflection

.box1 img {- webkit-box-reflect:below 0-webkit-linear-gradient (top,rgba), rgba 30% linear-gradient rgba (250pint 250), box-reflect:below 0 linear-gradient (), rgba (250) 30%)),

The effect is as follows:

Use the background image to add a mask to the reflection

First, we need a png picture of the pentagram:

.box2 img {- webkit-box-reflect:below 0 url (http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png); box-reflect:below 0 url (http://7s1r1c.com1.z0.glb.clouddn.com/t_star.png);})

The effect is as follows:

Thank you for your reading, the above is the content of "how to use CSS3's box-reflect to make reflection effect". After the study of this article, I believe you have a deeper understanding of how to use CSS3's box-reflect to make reflection effect. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.