CSS를 사용하여 두 개의 테두리가 있는 원을 만드는 방법은 무엇입니까?

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

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:

<code class="html"><div class="circle">
  <div class="inner"></div>
</div></code>

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

<code class="css">div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

위 내용은 CSS를 사용하여 두 개의 테두리가 있는 원을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!