Box-Shadow를 사용하여 Div 요소의 둥근 윤곽선을 어떻게 만들 수 있습니까?

Box-Shadow를 사용하여 Div 요소에 대한 둥근 윤곽선 만들기

div 요소의 윤곽선 모양을 사용자 정의하면 사용자 경험과 시각적 미학을 향상시킬 수 있습니다. box-shadow 속성을 사용하면 요소 윤곽선에 대한 border-radius 기능과 유사한 둥근 모서리를 얻을 수 있습니다.

이 기술을 설명하기 위해 둥근 테두리가 있는 입력 필드가 있는 시나리오를 고려해보세요. 포커스를 받을 때 윤곽선의 색상을 수정합니다. 기존의 정사각형 윤곽선은 매력적이지 않을 수 있습니다.

해결책:

기존 방법을 사용하여 윤곽선을 둥글게 만드는 대신 상자 그림자 속성을 활용하세요. 이 솔루션은 더욱 부드럽고 사용자 정의가 가능한 외관을 제공합니다. 상자 그림자의 설정을 미세 조정하여 둥근 윤곽선을 거의 모방하는 의사 윤곽선을 만들 수 있습니다.

  input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline-color: transparent; /* for high contrast modes */
    transition: .1s;
  }

  /* Smooth outline with box-shadow: */
  .text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
  }

  /* Hard "outline" with box-shadow: */
  .text2:focus {
    box-shadow: 0 0 0 2pt red;
  }

이 예에서 입력 요소는 처음에 2pt 테두리 반경을 갖지만 상자 -shadow 속성은 요소 주위에 1pt 회색 그림자를 추가합니다. 요소가 포커스를 받으면 상자 그림자는 보다 부드러운 윤곽선을 위해 수레 국화 파란색 색상을 사용하여 3pt로 증가합니다. 추가적으로 box-shadow를 0 0 0 2pt red로 설정하면 좀 더 선명한 윤곽선을 만들 수 있습니다.

위 내용은 Box-Shadow를 사용하여 Div 요소의 둥근 윤곽선을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!