Box-reflect Achieve reflection effect

This time to bring you box-reflect to achieve the reflection effect, Box-reflect realize the reflection effect of the notice, the following is the actual case, together to see.

Usually we want to achieve the effect of reflection, the general practice is to use multiple DOM elements absolute positioning +scale (minus-1) or rotate. The disadvantage of this approach is that it occupies space and too many DOM elements.

In a browser using the WebKit kernel (Chrome,safari, mobile browser), you can use the-webkit-box-reflect property to implement the reflection, the syntax is as follows

[Above | below | right | left]? <length>? <image>?

This value includes three parts: Azimuth + offset + mask layer

The azimuth is essential, and when the mask layer is used, the offset is not less, if not, 0 instead

!! Important : Masking layers are not color-independent, for example, using gradient colors as masks, solid colors transparent, transparent bursts of original colors

Examples of use are as follows:

<! DOCTYPE html>
The effect is as follows:


If you need to implement a similar effect in Firefox, you can use the-moz-element () function, but the effect varies greatly under rotation, as shown below.

<! DOCTYPE html>

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


If you want to be compatible with IE browser can also use SVG or canvas to do, SVG mainly use Pattern+mask+lineargradient+scale to do, canvas use scale+globalcompositeoperation.

The SVG Example section code is as follows:

<svg width= "height=" >    <defs>      <lineargradient id= "a" x1= "0" y1= "0" x2= "0" y2= "1" >        <stop offset= "0%" style= "Stop-color:yellow"/>        <stop offset= "100%" style= "stop-color:red"/>      </linearGradient>      <lineargradient id= "B" x1= "0" y1= "0" x2= "0" y2= "100%" >        <stop offset= "0 % "style=" Stop-color:rgba (255,255,255,0) "/>        <stop offset=" 100% "style=" Stop-color:rgba (255,255,255,1) "/ >      </linearGradient>      <mask id= "C" x= "0" y= "0" width= "1" height= "1" >        <rect x= "0" y= "0" Width= "100%" height= "100%" style= "Fill:url (#b)"/>      </mask>    </defs>    <rect x= "0" y= " 0 "width=" height= "style=" Fill:url (#a); "mask=" url (#c) "></svg>
The Canvas Example section code 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);
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Summary of the center layout of CSS

width:100%; The difference between the use and the Width:auto

Waterfall flow layout with unlimited load Picture album effect