box-reflect achieves reflection effect-CSS Tutorial-php.cn

This time I will bring you box-reflect to achieve the reflection effect. What are theprecautions for box-reflect to achieve the reflection effect? The following is a practical case, let’s take a look.

Usually when we want to achieve the reflection effect, the general approach is to use multiple DOM elements

Absolute positioning+scale (minus -1) or rotate. The disadvantage of this method is that it takes up space and has too many DOM elements.

In browsers using the webkit kernel (chrome, safari, mobile browsers), you can use the -webkit-box-reflect attribute to achieve reflection. The syntax is as follows

[above | below | right | left ]? ? ?

This value contains three parts: orientation + offset + mask layer

The orientation is essential Less; when using the mask layer, the offset is indispensable. If not, use zero instead

! ! ! Important: The effect of the mask layer has nothing to do with color. For example, if you use a gradient color as a mask, if it is a solid color, it will be transparent, and if it is transparent, the original color will be exposed.

Usage examplesare as follows As shown:

JS Bin

Copy after login

The effect is as follows:

If you need to achieve similar effects in firefox, you can use the -moz-element() function to achieve it, but The effect differs greatly under rotation, as shown below.

JS Bin

Copy after login

The effect of using -webkit-box-reflect under chrome is like this

If you want to be compatible with IE The browser can also use SVG or canvas to do it. SVG mainly uses pattern+mask+linearGradient+scale to do it, and canvas uses scale+globalCompositeOperation.

The code for the SVG example is as follows:

Copy after login

The code for the canvas example is as follows

var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var linearGradient1 = ctx.createLinearGradient(0,0,0,200); linearGradient1.addColorStop(0,"red"); linearGradient1.addColorStop(1,"yellow"); var linearGradient2 = ctx.createLinearGradient(0,0,0,200); linearGradient2.addColorStop(0,"transparent"); linearGradient2.addColorStop(1,"#ffffff"); ctx.fillStyle = linearGradient1; ctx.fillRect(0,0,200,200); ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = linearGradient2; ctx.fillRect(0,0,200,200);

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!