CSS로 내부 텍스트 그림자를 얻는 방법은 무엇입니까?

CSS로 내부 텍스트 그림자 구현

텍스트 내부에 텍스트 그림자 효과를 만드는 것은 CSS에서 어려운 작업일 수 있습니다. box-shadow 속성은 요소 내에서 그림자 렌더링을 허용하지만 이 기능은 텍스트로 확장되지 않습니다.

그러나 :before 및 :after 의사 요소를 사용하는 영리한 트릭을 사용하면 이 제한을 피할 수 있습니다. 텍스트 요소의 제목 속성을 원하는 콘텐츠로 설정하고 이러한 의사 요소를 사용하면 내부 텍스트 그림자의 환상을 만들 수 있습니다.

이 효과를 얻으려면 다음과 같이 :before 및 :after 요소를 정의하세요. title 속성에서 가져온 콘텐츠입니다. 텍스트 요소 내에 절대적으로 배치하고 원본 텍스트에서 약간 오프셋하여 그림자 효과를 만듭니다. rgba(255, 255, 255, .1)와 같은 투명한 검정색 및 불투명도로 스타일을 지정하여 배경과 미묘하게 혼합합니다.

다음은 이 기술을 보여주는 예제 코드 조각입니다.

<code class="css">.depth {
  position: relative;
  padding: 50px;
  font: bold 7em Arial, sans-serif;
  color: black;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}</code>

<code class="html"><h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1></code>

이 기술을 사용하면 Photoshop이나 광범위한 이미지 조작 없이 제공한 예와 시각적으로 유사한 내부 텍스트 그림자 효과를 얻을 수 있습니다.

위 내용은 CSS로 내부 텍스트 그림자를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!