CSS에서 둥근 테두리를 설정하는 방법

CSS에서 둥근 테두리를 설정하는 방법은 둥근 테두리 [border-radius]를 사용하는 것입니다. 이 네 개의 라디안의 둥근 모서리가 동일하면 [border-radius: 30px;]로 작성할 수 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS에서 둥근 테두리를 설정하는 방법:

둥근 테두리의 기본 사용법(테두리 반경):

둥근 테두리의 가장 기본적인 사용법은 네 개의 둥근 모서리를 동일한 호로 설정하는 것입니다.

boder-top-left-radius：30px；      //左上角
boder-top-right-radius：30px；   //右上角
boder-bottom-left-radius：30px；  //右下角
boder-bottom-right-radius：30px； //左下角

이 네 개가 두 라디안의 둥근 모서리는 동일하며 다음과 같이 쓸 수 있습니다:

border-radius：30px；

css 둥근 테두리 설정:

css 부분:

.div1{
            margin:0 auto;
            background: darkcyan;
            width:200px;
            height:200px;
            border:2px solid darkslategray;
            border-radius:30px;
            text-align: center;
            line-height: 200px;
        }

html 부분:

 <div class="div1">圆角边框</div>

효과는 다음과 같습니다:

권장 튜토리얼: CSS 비디오 튜토리얼

위 내용은 CSS에서 둥근 테두리를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!