CSS implementation reflection ------- Day80

CSS implementation reflection ------- Day80

I was very happy when I found this feature and didn't want to be a defective product. It reminds me of the famous six-pulse sword in tianlong Babu, which can be used in this browser, on the other hand, it doesn't matter. It doesn't work well when it's time, but there's always better than what you don't want to do. There's a little bit of accumulation, and it's always enough to get together.

This is supported on the-webkit kernel Browser:-Webkit-box-reflect

This style can have three attributes, Direction, Distance, Other styles

First, let's look at the direction. There are four possibilities: left, right, below, and above. Let's look at the effect and write a simple code:

 

# Run1 {border: 4px solid red;-webkit-box-reflect: left;} # run2 {border: 4px solid yellow;-webkit-box-reflect: right ;} # run3 {margin-left: 40px; border: 4px solid blue;-webkit-box-reflect: below;} // here for ease of viewing # run4 {border: 4px solid green;-webkit-box-reflect: above ;}

 

In this way, we can see the following results:

 

Then, the second attribute is the distance from the original image, which can be achieved using the length distance or the percent percentage. Modify the style to see the effect.

 

#run2{ border:4px solid yellow; -webkit-box-reflect:below;}#run3{margin-left:40px; border:4px solid blue; -webkit-box-reflect: below 100px;}#run4{border:4px solid green;-webkit-box-reflect: below 100%;}

 

It looks more obvious and easier to set the length method, so we recommend that you use length

The last step is other styles. For example, see the following

 

#run2{ border:4px solid yellow; -webkit-box-reflect:below  0px -webkit-gradient(linear, left top, left bottom, from(rgba(150, 10, 100, 0.1)), to(rgba(10, 10, 0, 0.1)));}

The effect is:

 

 

Record the implementation of the current browser for the moment, and today I see a very popular word, mask, I have not done it yet, I want to see it again