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

CSS3 그라데이션을 사용하여 테두리 반경 삽입

CSS3 그라데이션을 사용하면 이미지 없이 테두리 반경 삽입을 얻을 수 있습니다. 이 접근 방식에는 요소 주위에 안쪽으로 구부러진 테두리의 환상을 만들기 위해 여러 개의 투명한 방사형 그래디언트를 레이어링하는 작업이 포함됩니다.

다음 CSS 코드는 Lea Verou의 솔루션을 사용하여 그래디언트를 사용하여 삽입 테두리 반경을 만듭니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!