CSS3 참고사항: -webkit-box-reflect는 리플렉션을 구현합니다.
- 高洛峰원래의
- 2017-02-28 14:03:281810검색
일반적으로 반사 효과를 얻으려는 경우 일반적인 접근 방식은 여러 DOM 요소를 사용하여 절대적인 위치 + 크기 조정(-1) 또는 회전을 수행하는 것입니다. 이 방법의 단점은 공간을 차지하고 DOM 요소가 너무 많다는 것입니다.
웹킷 커널을 사용하는 브라우저(크롬, 사파리, 모바일 브라우저)에서는 -webkit-box-reflect 속성을 사용하여 리플렉션을 구현할 수 있습니다.
[ 위 | 아래 | 오른쪽 | 왼쪽 ]? 9843068740091284940841a28680e891?
이 값은 방향 + 오프셋 + 마스크 레이어
사용 시 방향이 필수입니다. 마스크 레이어에서는 오프셋이 필수입니다. 그렇지 않은 경우 대신 0을 사용하세요
! ! ! 중요: 마스크 레이어의 효과는 색상과 관련이 없습니다. 예를 들어 그라데이션 색상을 마스크로 사용하면 단색이면 투명해지고, 투명하면 투명해집니다. 원래 색상이 그대로 노출됩니다
사용예는 다음과 같습니다
<!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>
효과는 다음과 같습니다
Firefox에서 비슷한 효과를 얻으려면 -moz-element( ) 함수를 사용할 수 있지만 아래와 같이 회전 시 효과가 상당히 다릅니다.
<!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>
크롬에서 -webkit-box-reflect를 사용하면 이렇습니다
IE 브라우저와의 호환성을 원한다면 SVG나 캔버스를 사용해도 됩니다. SVG는 주로 패턴+마스크+선형Gradient+스케일을 사용하고, 캔버스는 스케일+globalCompositeOperation을 사용합니다.
SVG 예제 코드는 다음과 같습니다.
<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>
캔버스 예제 코드는 다음과 같습니다
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);
위는 다양한 반사 구현 방법에 비해 가장 간단한 효과를 얻으려면 css3의 -webkit-box-reflect를 사용하는 것이 좋습니다. 모든 분들의 학습에 도움이 되기를 바라며, 또한 모든 분들이 PHP 중국어 홈페이지를 응원해주시기를 바랍니다.
더 많은 CSS3 참고 사항: -webkit-box-reflect 반사 관련 기사 구현에 대한 내용은 PHP 중국어 웹사이트를 참고하세요!