프레임이 있는 원형 이미지

둥근 이미지는 사진을 부드럽게 보이게 합니다.

우리는 이와 같이 html에 코드를 추가하는 것으로 시작합니다.

<img src="cat.jpg" alt="cat" class="roundImg"/>

둥근 이미지

그림 주위에 프레임이 없는 둥근 이미지를 원한다면 간단합니다.
css에서 다음 코드를 사용하십시오.

.roundImg {
  border-radius: 50%;
}

border-radius 속성은 그림 모서리의 반경을 정의합니다.
따라서 원 모양을 만들려면 border-radius: 50%를 사용하십시오.

하나의 프레임이 있는 원형 이미지

코드에 border의 크기, 스타일 및 색상을 추가하십시오.

.roundImg {
  border-radius: 50%;
  border: 5px solid #ff0000;
}

이중 프레임이 있는 원형 이미지

코드는 하나의 프레임이 있는 둥근 이미지와 비슷합니다.
이제 border 크기에 한 줄을 더 추가합니다.

.roundImg {
  border-radius: 50%;
  padding: 10px;
  border: 5px solid #ff000;
}

원형 이미지, 테두리 색상이 다른 이중 프레임

때때로 그림 프레임의 색상을 사용하여 패딩에 background-color를 추가하고 싶을 수 있습니다.

.roundImg {
  border-radius: 50%;
  padding: 10px;
  border: 5px solid #ff000;
  background-color: #ffa500;
}

이중 및 그림자가 있는 원형 이미지

box-shadow 속성을 사용하여 사진 프레임에 다른 레이어를 만들 수도 있습니다. border-radius가 설정되어 있기 때문에 상자 그림자는 border-radius와 동일한 둥근 모서리를 사용합니다.
다음과 같은 box-shadow 구문을 기억하십시오.

box-shadow: outset-x | offset-y | blur-radius | spread-radius | color;

box-shadow 선언은 다음과 같습니다.

.roundImg {
  border-radius: 50%;
  padding: 10px;
  border: 5px solid #ffffff;
  background-color: #ffa500;
  box-shadow: 0 0 30px 30px #ffa500;
}

아웃라인을 사용한 트리플 프레임의 원형 이미지

외곽선 속성은 테두리 외부의 요소 주위에 그려지는 선입니다. 외곽선 속성은 상자 모델의 일부가 아니므로 요소 자체 또는 그 옆에 있는 요소의 위치에 영향을 미치지 않습니다.
outline 구문은 다음과 같습니다(값의 순서는 중요하지 않음).

outline: color | style | width;

윤곽이 존중되지 않습니다border-radius. 외곽선은 기본적으로 항상 직사각형이므로 아래와 같이 -moz-outline-radius를 추가하여 외곽선이 원형이 되도록 조정해야 합니다.
(속성-moz-outline-radius은 Firefox에서만 사용할 수 있습니다. 다른 브라우저에서는 작동하지 않습니다.)

.roundImg {
  border-radius: 50%;
  padding: 10px;
  border: 5px solid #fff;
  background-color: #ffa500;
  outline: #ff0000 solid 8px;
  -moz-outline-radius: 50% 50% 50% 50%;
}

트리플 프레임의 원형 이미지

트리플 프레임이 있는 둥근 이미지를 만드는 또 다른 방법은 이미지에 다른 htmldiv 표지를 추가하는 것입니다.
html에서는 다음과 같이 보일 것입니다.

<div>
    <img src="cat.jpg" alt="cat" class="roundImg"/>
</div>

그런 다음 div를 원형 모양으로 사용자 지정합니다.

div {
  border-radius: 50%;
  background-color: #ff0000;
  height: 23rem;
  width: 23rem;
  margin: 2rem;
}

문제는 이미지의 크기가 표지 div의 크기보다 약간 작아야 하고 정확히 표지 div의 중간에 있어야 한다는 것입니다.

.roundImg {
  border-radius: 50%;
  width: 20rem;
  height: 20rem;
  padding: 10px;
  border: 5px solid #fff;
  background-color: #ffa500;
  margin: 0.5rem;
}

그리고 그것은 outline와 다릅니다. 표지 div는 상자 모델의 일부입니다. 변경 사항이 무엇이든 인접한 요소에 영향을 미칩니다.

특별한 감사

이 고양이 이미지는 skeeze의 Pixabay님이 만든 것입니다.