CSS3만 사용하여 삽입 테두리 반경을 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-12-03 10:46:10

원래의

769명이 탐색했습니다.

How Can I Create an Inset Border Radius Using Only 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!