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 및 그라데이션에 대한 지원이 필요하며, 이는 모든 이전 브라우저에서 지원되지 않을 수 있으며 필요합니다. 그라데이션을 지원하지 않는 이전 브라우저에 대한 점진적인 향상 또는 이미지 기반 대체.