CSS3만 사용하여 삽입 테두리 반경을 어떻게 만들 수 있습니까?

CSS3을 사용하여 테두리 반경 삽입

CSS3에서는 모서리가 바깥쪽이 아닌 안쪽으로 구부러지는 삽입 테두리 반경을 달성할 수 있습니다. 이미지를 사용하지 않고 도전해보세요. 그러나 CSS3 그라디언트를 활용하는 영리한 솔루션이 있습니다.

Lea Verou의 독창적인 접근 방식에는 곡선이 있는 일련의 투명한 그라디언트를 만들어 삽입된 테두리 반경의 환상을 만드는 것이 포함됩니다. 이러한 그라디언트를 정확하게 배치하면 원하는 둥근 모서리 효과를 얻을 수 있습니다.

아래에서 볼 수 있듯이 그녀의 CSS 코드는 원하는 삽입 테두리 반경이 있는 요소에 대한 사용자 정의 클래스를 정의합니다.

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
            -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
            -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

이 클래스를 요소에 적용하면 테두리 반경이 삽입된 요소가 생성됩니다. 이 기술은 rgba 및 그래디언트 지원에 의존하므로 점진적인 향상 전략이라는 점에 유의하는 것이 중요합니다. 이전 브라우저나 그라데이션을 지원하지 않는 브라우저의 경우 지원을 제공하기 위해 이미지 기반 폴백을 권장합니다.

위 내용은 CSS3만 사용하여 삽입 테두리 반경을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!