순수 CSS를 사용하여 원형 이미지를 얻는 방법은 무엇입니까? (코드 예)

PS를 사용하지 않고 온갖 종류의 원형 이미지를 만드는 방법에 대해 생각해 본 적이 있나요? 이 글에서는 CSS를 사용하여 원형 이미지를 구현하는 방법을 소개합니다. 내용을 직접 살펴보겠습니다.

기본 코드

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

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

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

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

효과는 다음과 같습니다.

설명: 위 코드의 background -size는 배경의 크기를 이용하여 연산할 수 있는 새로운 CSS3 속성입니다. 정확한 픽셀 값, 백분율을 입력하여 너비와 높이를 설정하거나 배경 표지를 만들거나 전체 컨테이너에 맞게 만들 수 있습니다. 자세한 내용은 배경 크기 문서를 참조하세요. (관련 권장사항: css3 학습 매뉴얼)

다음으로 CSS에서 원형 이미지를 구현하는 방법을 자세히 설명하겠습니다.

이제 정사각형 컨테이너에 적합한 이미지가 생겼습니다. CSS 코드를 변경하여 원형 프레임을 만들어 보겠습니다. 우리는 border-radius 속성을 사용하여 이 속성이 적용되는 요소의 모서리를 둥글게 만들 수 있습니다. 원형 이미지를 얻으려면 이미지 크기의 절반에 해당하는 값을 이미지에 부여해야 합니다. 이제 CSS 코드는 다음과 같습니다.

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

원형 이미지의 CSS 구현은 다음과 같습니다.

참고: 원형 이미지의 CSS 구현이 이제 완료되었습니다! 새로운 CSS 속성을 사용하면 Photoshop을 사용하여 시간을 절약하는 효과를 만들 수 있습니다.

Extension

border-radius 속성을 주의 깊게 연구하면 이미지의 모서리를 비대칭 방식으로 조작할 수 있습니다. 구체적으로 다음 CSS 코드를 보면

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

효과는 다음과 같습니다. 팔로우:

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