순수 CSS를 사용하여 원형 이미지를 구현하는 방법은 무엇입니까?

CSS는 웹 페이지에서 많은 효과를 얻을 수 있는데, 순수한 CSS를 사용하여 원형 이미지를 얻으려면 어떻게 해야 할까요? 이번 글에서는 CSS로 원형 이미지를 구현하는 방법을 소개하겠습니다. 구체적인 내용을 살펴보겠습니다.

기본 HTML 및 CSS부터 시작합니다(빈 HTML 문서를 만들고 여기에 스타일시트를 연결할 수 있다고 가정).

<div class="img-circular"></div>

img-circular 클래스의 기본 스타일을 설정해 보겠습니다.

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('img/tupian.jpg');
 background-size: cover;
 display: block;
}

위 코드의 Background -size는 CSS3의 새로운 속성으로, 배경 크기를 조작하는 데 사용할 수 있습니다. 정확한 픽셀 값, 백분율을 입력하여 너비와 높이를 설정하거나 전체 페이지에 맞게 배경 표지를 만들 수 있습니다.

이미지를 설정한 후 CSS 코드를 변경하여 원형 프레임을 만들어 보겠습니다. 우리는 요소 모서리의 호를 변경할 수 있는 border-radius 속성을 사용할 것입니다. 이미지를 원형으로 만들기 위해 CSS 파일은 이제 다음과 같습니다.

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('img/tupian.jpg');
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
}

실행 결과는 다음과 같습니다. 그림이 원형이 됩니다

이 기사는 여기까지입니다. 더 흥미로운 내용에 주목할 수 있습니다. PHP 중국어 홈페이지의 CSS 동영상 튜토리얼 칼럼을 참고하세요! ! !

위 내용은 순수 CSS를 사용하여 원형 이미지를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!