이미지없이 CSS3 용지 컬을 만드는 방법

이 튜토리얼은 이미지가없는 CSS3 용지 컬 효과를 만드는 것을 보여줍니다. 이전의 튜토리얼은 CSS3의 및 pseudo elements를 사용하여 음성 기포와 리본을 만드는 방법을 보여주었습니다. 이것은 그 기술을 기반으로합니다. :before 종이 컬 효과는 수신 착시이며, 일반적으로 요소의 바닥에 그림자로 달성됩니다. 이전에는이 ​​이미지 편집 소프트웨어가 필요했습니다. CSS3는 우수한 대안을 제공합니다. CSS3 사용의 장점은 다음과 같습니다. 브라우저 호환성 (구형 브라우저에서 우아하게 저하), 배경 독립성, 확장 성, 재사용 가능한 코드 및 쉬운 사용자 정의. 먼저 간단한 html 요소를 만듭니다 : :after 그런 다음 : 를 사용하여 기본 내부 및 외부 음영을 추가하십시오

컬 효과는 2 개의

및 pseudo elements로 생성됩니다. 이들은 다음과 같습니다.

<code class="language-html"><div class="box">My box</div></code>

CSS3 변환을 사용하여 회전하고 비뚤어진 하단 가장자리에 배치되었습니다

a box-shadow

<code class="language-css">.box {
  position: relative;
  width: 500px;
  padding: 50px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}</code>

설정 는 주 상자 뒤에 의사 요소를 배치하여 그림자 가장자리 만 보이게 만듭니다.

의사 요소에 대한 CSS : :before 이것은 더 넓은 브라우저 지원을 위해 공급 업체 접두사를 사용하지만 이미지 기반 솔루션보다 더 효율적입니다. 이 효과는 현대식 브라우저에서 작동합니다. 오래된 브라우저는 단순히 그림자를 생략합니다. 데모 페이지를 사용할 수 있습니다 (링크는 입력에 제공되지 않으므로 생략 됨). CSS는 HTML 내에 내장되어 있습니다. IE6, 7 및 8은 그림자 효과를 보여주지 않고 우아하게 분해됩니다. :after 순수한 CSS3 용지 컬에 대한 자주 묻는 질문 (FAQ)은 원래 텍스트에서 이미 잘 정립되어 있기 때문에 생략됩니다.

위 내용은 이미지없이 CSS3 용지 컬을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!