Maison > Article > interface Web > box-reflect obtient un effet de réflexion

box-reflect obtient un effet de réflexion

php中世界最好的语言original: 2018-03-22 17:02:322081parcourir

Cette fois, je vais vous apporter box-reflect pour obtenir l'effet de réflexion. Quelles sont les précautions pour box-reflect pour obtenir l'effet de réflexion. Ce qui suit est un cas pratique, jetons un coup d'œil.

Habituellement, nous voulons obtenir l'effet de réflexion. L'approche générale consiste à utiliser plusieurs éléments DOM Positionnement absolu+échelle (moins -1) ou rotation. L’inconvénient de cette méthode est qu’elle prend de la place et comporte trop d’éléments DOM.

Dans les navigateurs utilisant le noyau webkit (chrome, safari, navigateurs mobiles), vous pouvez utiliser l'attribut -webkit-box-reflect pour implémenter la réflexion. La syntaxe est la suivante

[ ci-dessus | ci-dessous | droite | gauche ]? ? ?

La valeur contient trois parties : orientation + décalage + calque de masque

L'orientation est essentielle Moins ; calque de masque, le décalage est indispensable Sinon, utilisez plutôt zéro

! ! ! Important : L'effet du calque de masque n'a rien à voir avec la couleur. Par exemple, si vous utilisez une couleur dégradée comme masque, si c'est une couleur unie, elle sera transparente, et si elle est transparente, la couleur sera transparente. la couleur originale sera exposée

Les exemples d'utilisation sont les suivants Comme indiqué :

<!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>

L'effet est le suivant :

Si vous avez besoin d'obtenir des effets similaires dans Firefox, vous pouvez utiliser la fonction -moz-element() pour y parvenir, mais l'effet est assez différent en rotation, comme indiqué ci-dessous.

<!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>

L'effet de l'utilisation de -webkit-box-reflect sous Chrome est comme ceci

Si vous Si vous voulez être compatible avec les navigateurs IE, vous pouvez également utiliser SVG ou Canvas. SVG utilise principalement pattern+mask+linearGradient+scale, et Canvas utilise scale+globalCompositeOperation.

Le code de l'exemple SVG est le suivant :

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

Le code de l'exemple canevas est le suivant

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, venez pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé de la disposition centrée du CSS

La différence entre l'utilisation de width:100% et width:auto

Disposition du flux en cascade et effet d'album photo à chargement infini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'attribut margin en CSSArticle suivant：Explication détaillée de l'attribut margin en CSS

Articles Liés

Voir plus