CSS로 div 라운드를 만드는 방법

CSS에서는 border-radius 속성을 사용하여 div를 둥글게 설정할 수 있습니다. div 요소에 "border-radius:50%" 스타일만 추가하면 됩니다. 이 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다. 둥근 모서리의 반경은 너비/높이의 절반을 초과할 수 없습니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

둥근 테두리의 단위로 백분율을 사용할 수 있습니다. 예를 들어 사각형의 둥근 테두리를 50%로 설정하면 원이 형성됩니다. 그러나 백분율과 픽셀을 사용하는 것은 동일하지 않습니다.

참고: 백분율이 50%를 초과하면 모양이 더 이상 변경되지 않습니다.

예:

css 부분:

.box1{
width:200px;
height:200px;
margin: 30px auto;
border: 2px solid #e4007e;
text-align: center;
line-height: 200px;
font-weight: bold;
font-size: 24px;
background: burlywood;
border-radius: 50%;//圆角百分比
}

html 부분:

<div class="box1">这是一个圆</div>

효과는 그림과 같습니다:

추천 학습: css 비디오 튜토리얼

위 내용은 CSS로 div 라운드를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!