두 개의 테두리가 있는 반응형 원의 스타일을 지정하는 방법은 무엇입니까?

반응형으로 두 개의 테두리가 있는 원 스타일 지정

컨테이너 크기에 맞게 두 개의 테두리가 있는 원의 스타일을 지정하려면 다음 접근 방식을 활용할 수 있습니다.

<div></div>

<code class="css">div {
  width: 20em;
  height: 20em;
  border-radius: 50%;
  background-color: red;
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px red;
}</code>

이 구조는 box-shadow 속성으로 표시되는 흰색 단색 테두리와 빨간색 내부 테두리가 있는 원을 만듭니다. 상자 그림자는 원의 가장자리 너머로 배경색을 확장하여 두 번째 테두리의 환상을 효과적으로 만듭니다. 이 접근 방식을 사용하면 원의 스타일이 반응형으로 유지되어 컨테이너 크기에 따라 크기와 모양이 조정됩니다.

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