Maison > interface Web > tutoriel CSS > le corps du texte

Notes CSS3 : -webkit-box-reflect implémente la réflexion

高洛峰
Libérer: 2017-02-28 14:03:28
original
1826 Les gens l'ont consulté

Habituellement, lorsque nous voulons obtenir l'effet de réflexion, l'approche générale consiste à utiliser plusieurs éléments DOM pour positionner de manière absolue l'échelle (moins -1) ou faire pivoter. 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 ]? ? ?

Cette valeur contient trois parties : calque de masque de décalage d'orientation

L'orientation est indispensable lors de l'utilisation ; le 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 d'origine sera exposée

L'exemple d'utilisation est le suivant :

<!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>
Copier après la connexion

L'effet est le suivant :

CSS3 Notes: -webkit-box-reflect实现倒影

Si vous avez besoin d'obtenir des effets similaires dans Firefox, vous pouvez utiliser la fonction -moz- element(), 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>
Copier après la connexion

CSS3 Notes: -webkit-box-reflect实现倒影

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

CSS3 Notes: -webkit-box-reflect实现倒影

Si vous souhaitez être compatible avec le navigateur IE, vous pouvez également utiliser SVG ou Canvas. SVG utilise principalement l'échelle de masque de motif LinearGradient pour le faire, et Canvas utilise l'échelle 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>
Copier après la connexion

Le code de l'exemple de canevas est le suivant

var canvas = document.getElementById(&#39;canvas&#39;),
    ctx = canvas.getContext(&#39;2d&#39;);

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 = &#39;destination-out&#39;;

ctx.fillStyle = linearGradient2;
ctx.fillRect(0,0,200,200);
Copier après la connexion

Voici les différentes méthodes de mise en œuvre de la réflexion. En comparaison, il est préférable d'utiliser -webkit-box-reflect de CSS3 pour obtenir l'effet le plus simple. J'espère que cela sera utile à l'apprentissage de chacun, et j'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus de notes CSS3 : -webkit-box-reflect implémentation d'articles liés à la réflexion, veuillez faire attention au site Web PHP chinois !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal