집 >웹 프론트엔드 >CSS 튜토리얼 >box-reflect는 반사 효과를 얻습니다.

box-reflect는 반사 효과를 얻습니다.

php中世界最好的语言원래의: 2018-03-22 17:02:322136검색

이번에는 반사 효과를 얻기 위한 박스 반사를 가져오겠습니다. 반사 효과를 얻기 위한 박스 반사의 주의사항은 무엇인가요?

일반적으로 반사 효과를 얻으려는 경우 일반적인 접근 방식은 여러 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>

효과는 다음과 같습니다.

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나 캔버스를 주로 사용하셔도 됩니다. +linearGradient+ 크기 조정을 위해 캔버스는 scale+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);

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주목해 주세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!