CSS를 사용하여 반응적으로 두 개의 서로 다른 테두리가 있는 원을 만드는 방법은 무엇입니까?

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

제공된 작동 CSS에서 알 수 있듯이 CSS 원을 만드는 것은 간단합니다. 그러나 두 개의 서로 다른 테두리가 있는 원을 만들려면 추가적인 CSS 기술을 사용해야 합니다.

제공된 HTML 구조를 사용하면 단일

요소는 원을 나타냅니다.

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

다음과 같이 CSS를 수정하여 두 개의 테두리가 있는 원을 만들 수 있습니다.

<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>

이 CSS는 box-shadow 속성을 사용하여 두 번째 테두리를 추가합니다. , 원 주위에 5px 너비의 빨간색 그림자를 만들어 효과적으로 두 번째 테두리의 환상을 만듭니다. 두 번째 테두리의 색상은 box-shadow 속성의 빨간색 값에 의해 결정됩니다.

제공된 CSS는 컨테이너 크기의 변화에 ​​유연하게 반응하는 두 개의 별도 테두리가 있는 원을 생성하여 원하는 효과를 얻습니다.

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

css html using Property this border

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.