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

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

Mary-Kate Olsen

풀어 주다： 2024-11-02 01:38:30

원래의

921명이 탐색했습니다.

How to Create a Circle with Two Distinct Borders Responsively Using 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!