Home >Web Front-end >CSS Tutorial >box-reflect achieves reflection effect

box-reflect achieves reflection effect

php中世界最好的语言Original: 2018-03-22 17:02:322153browse

This time I will bring you box-reflect to achieve the reflection effect. What are the precautions 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 examples are as follows As shown:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/csss">
    .box{ width:200px; height:200px; margin-bottom:20px;transform:scale(-1,1); background-image:linear-gradient(90deg,red,yellow);-webkit-box-reflect:below 10px linear-gradient(180deg,transparent,#000); }
  </style>
</head>
<body>
  <p class="box"></p>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    .box{ width:200px; height:200px; margin:100px 0 0 100px; }
    .box1{ background-image:linear-gradient(180deg,red,yellow); transform:scale(1,-1) rotate(45deg)}
    .box2{ background-image:-moz-element(#box1); }
  </style>
</head>
<body>
  <p class="box box1" id="box1"></p>
  <p class="box box2" id="box2"></p>
</body>
</html>

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:

<svg width="200" height="200">
    <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="200" height="200" style="fill:url(#a);" mask="url(#c)">
</svg>

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

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!

box-reflect achieves reflection effect

Related articles