CSS를 사용하여 원형 아바타 프레임을 구현하는 방법

이 글에서는 CSS를 사용하여 일정한 참조 가치를 갖는 원형 아바타 프레임을 구현하는 방법을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있습니다.

1. 1

img를 직접 원형으로 설정합니다. 이 경우 이미지가 정사각형이 아니면 이미지가 늘어납니다

<img class="circleImg" src="../img/photo/img.jpg"  />

해당 CSS는

.circleImg{
  border-radius: 30px;
  width:60px;
  height:60px; 
}

#🎜 🎜#boder-radius는 이미지 너비의 절반입니다

2. 방법 2

배경 이미지로 설정

<p class="bgImg"></p>

해당 css는 #🎜🎜 #

.bgImg{ 
  border-radius: 30px;
  width:60px;
  height:60px; 
  background: url("../img/photo/img.jpg") no-repeat center;
  background-size:60px;
}

드래그된 그림이 정사각형이 아닌 경우 너비에 비례하여 표시됩니다. 그런 다음 배경 크기는 그림의 너비로 설정되고 높이는 자동으로 설정됩니다. 높이에 비례하여 표시해야 하며 background-size:auto 60px;#🎜🎜 #

표시 효과는

입니다. 위 내용은 본 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용을 참고해주세요!

관련 권장 사항:

CSS를 사용하여 텍스트 줄 바꿈을 구현하는 방법

사용 방법 그것을 달성하기 위한 CSS3 텍스트 종이접기의 효과

위 내용은 CSS를 사용하여 원형 아바타 프레임을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!