두 개의 테두리가 있는 원을 만드는 방법

CSS를 사용하면 반응형으로 두 개의 테두리가 있는 원으로 div 스타일을 지정할 수 있습니다. 제공된 원본 원형 div CSS를 수정하여 원하는 효과를 만들 수 있습니다.

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

여기서 box-shadow 속성은 원 주위에 두 번째 테두리를 만드는 데 사용됩니다. 0 0 0 5px 값은 그림자의 오프셋, 흐림 및 확산을 정의하고 빨간색은 테두리 색상을 지정합니다.

질문에 언급된 내부 div 접근 방식은 내부에 추가 div를 사용하여 구현할 수 있습니다. 서클 div:

내부 div는 배경색으로 스타일을 지정하고 Flexbox를 사용하여 수직으로 정렬할 수 있습니다.

div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}