CSS3 Notes:-webkit-box-reflect realizes reflection

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);

The above is the reflection of the implementation of various methods, compared with CSS3-webkit-box-reflect to achieve the simplest effect. Hope that everyone's study has helped, but also hope that we support topic.alibabacloud.com.