CSS3 참고사항: -webkit-box-reflect는 리플렉션을 구현합니다.-CSS 튜토리얼-php.cn

CSS3 참고사항: -webkit-box-reflect는 리플렉션을 구현합니다.

高洛峰

풀어 주다： 2017-02-28 14:03:28

원래의

1873명이 탐색했습니다.

일반적으로 반사 효과를 얻으려는 경우 일반적인 접근 방식은 여러 DOM 요소를 사용하여 절대적인 위치 + 크기 조정(-1) 또는 회전을 수행하는 것입니다. 이 방법의 단점은 공간을 차지하고 DOM 요소가 너무 많다는 것입니다.

웹킷 커널을 사용하는 브라우저(크롬, 사파리, 모바일 브라우저)에서는 -webkit-box-reflect 속성을 사용하여 리플렉션을 구현할 수 있습니다.

[ 위 | 아래 | 오른쪽 | 왼쪽 ]? <이미지>?

이 값은 방향 + 오프셋 + 마스크 레이어

사용 시 방향이 필수입니다. 마스크 레이어에서는 오프셋이 필수입니다. 그렇지 않은 경우 대신 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>

로그인 후 복사

효과는 다음과 같습니다

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

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>

로그인 후 복사

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

크롬에서 -webkit-box-reflect를 사용하면 이렇습니다

CSS3 Notes: -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(&#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);

로그인 후 복사

위는 다양한 반사 구현 방법에 비해 가장 간단한 효과를 얻으려면 css3의 -webkit-box-reflect를 사용하는 것이 좋습니다. 모든 분들의 학습에 도움이 되기를 바라며, 또한 모든 분들이 PHP 중국어 홈페이지를 응원해주시기를 바랍니다.

더 많은 CSS3 참고 사항: -webkit-box-reflect 반사 관련 기사 구현에 대한 내용은 PHP 중국어 웹사이트를 참고하세요!