Div의 둥근 윤곽선을 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

Div의 둥근 윤곽선을 어떻게 만들 수 있나요?

Barbara Streisand

풀어 주다： 2024-11-30 15:31:18

원래의

329명이 탐색했습니다.

How Can I Create Rounded Outlines for Divs?

둥근 모서리로 Div 윤곽을 그릴 수 있나요?

border-radius 속성과 유사하게 div 요소에 둥근 윤곽을 지정할 수 있습니다. border-radius 속성이 효과가 있다고 생각할 수도 있지만 더 많은 제어 기능을 제공하는 대안이 있습니다: box-shadow.

예를 들어 테두리가 둥근 입력 필드가 있고 초점을 조정하려는 경우 외곽선 색상, 상자 그림자를 사용할 수 있습니다. 부드러운 모양을 제공하는 동시에 둥근 윤곽선을 시뮬레이션할 수도 있습니다. 이 효과를 얻을 수 있는 방법은 다음과 같습니다.

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

로그인 후 복사

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