CSS에서 오목한 테두리 효과를 어떻게 만들 수 있나요?

그라디언트를 사용하여 오목 효과 만들기

CSS에서 border-radius는 요소의 가장자리에 곡선을 추가하는 강력한 도구입니다. 그러나 곡선이 바깥쪽으로 튀어나오는 볼록한 테두리를 만드는 것으로 제한됩니다. 곡선이 안쪽으로 떨어지는 오목한 테두리를 원한다면 어떻게 해야 할까요?

예: 볼록한 테두리

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}</code>

시도한 솔루션

오목한 테두리를 만들려면 테두리 반경에 음수 값을 사용해 보세요. 그러나 이 접근 방식은 CSS에서는 작동하지 않습니다.

해결책: 방사형 그라디언트

CSS만으로는 진정한 오목 테두리를 만들 수는 없지만 시뮬레이션할 수는 있습니다. 방사형 그래디언트를 사용한 효과. 그라데이션을 사용하면 색상 간 부드러운 전환을 만들 수 있으며 여러 그라데이션을 사용하면 곡선 가장자리의 환상을 만들 수 있습니다.

다음 예를 고려하세요.

<code class="css">#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}</code>

이 CSS는 두 가지를 만듭니다. 오목한 가장자리를 형성하기 위해 겹쳐지는 방사형 그라데이션. 첫 번째 그라데이션은 -20%에서 투명한 원으로 시작하여 100%에서 단색 #888888 색상으로 전환됩니다. 두 번째 그라데이션도 동일하지만 120%에서 시작됩니다.

위 내용은 CSS에서 오목한 테두리 효과를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!