텍스트의 내부 그림자를 구현하는 방법은 무엇입니까?

Question

text-shadow로 텍스트 그림자를 구현할 수 있나요? 그렇다면 텍스트 내부 그림자를 어떻게 표시할까요?

Answer 1

핵심은 RGBA 투명 색상을 사용하여 글꼴 내부 그림자 효과를 시뮬레이션하는 것입니다.

body{
background:#fff;
}
.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

원리는 매우 간단합니다. 텍스트 그림자는 항상 글꼴 아래에 있으므로 텍스트 그림자의 여러 그림자를 사용하여 먼저 글꼴의 단색 아래에 포함된 그림자 효과를 시뮬레이션한 다음 투명도를 줄입니다. 글꼴의 효과는 내부 그림자의 시뮬레이션 효과입니다. 물론 이런 종류의 시뮬레이션에는 한계가 있습니다. 예를 들어 배경색과 시뮬레이션된 그림자가 동일해야 합니다. 그렇지 않으면 혼란스럽습니다. 하하. 둘째, RGBA를 지원하지 않는 브라우저에서는 작동하지 않으며 기존 브라우저가 최소한 단색을 표시할 수 있도록 RGBA 위에 기본 색상을 추가해야 합니다.

.inset-text{
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
font-size:5em;
color:#09f;
color:rgba(0,102,204,0.7);
text-shadow:1px 3px 6px #fff,0 0 0 #000,1px 3px 6px #fff;
}

마지막으로 예제에서 텍스트를 선택하면 위에서는 명백히 흐려지는 것을 볼 수 있습니다. 이는 다중 그림자 효과가 선택된 경우 여전히 유효하기 때문에 이전에 언급한 바 있으므로 텍스트의 가독성을 위해 선택 시 텍스트 그림자를 제거해야 합니다.

아아아아