Div 요소에 둥근 윤곽선 효과를 만들려면 어떻게 해야 합니까?

Div 요소의 둥근 윤곽선 시뮬레이션

border-radius 속성은 div 요소 테두리의 둥근 모서리를 허용하지만, 둥근 윤곽선에 대한 솔루션을 제공하지 않습니다.

그러나 다음을 사용하는 영리한 해결 방법이 있습니다. 상자 그림자 속성. 다음 예에서는 부드럽고 둥근 윤곽선 효과를 만드는 방법을 보여줍니다.

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

이 예에서 box-shadow 속성은 입력 필드 주위에 미묘한 그림자를 만듭니다. 확산 반경을 0으로 설정하면 그림자가 요소의 가장자리로 제한되어 윤곽선과 같은 효과가 생성됩니다.

text1 및 text2 클래스는 확산 반경과 색상을 변경하여 윤곽선을 추가로 사용자 정의합니다. 매끄럽거나 가장자리가 선명한 윤곽선으로 표시됩니다.

이 기술은 div 요소의 둥근 윤곽선을 얻기 위한 유연하고 우아한 솔루션을 제공합니다.

위 내용은 Div 요소에 둥근 윤곽선 효과를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!