Maison >interface Web >tutoriel CSS >box-reflect obtient un effet de réflexion
box-reflect obtient un effet de réflexion
- php中世界最好的语言original
- 2018-03-22 17:02:322121parcourir
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!