Div 요소의 윤곽선 모서리가 둥글게 표시될 수 있나요?

Div 요소는 둥근 윤곽선 모서리를 수용합니까?

Div 요소에는 border-radius 속성을 통해 명시적으로 둥근 윤곽선 모서리를 갖는 기능이 부족합니다. 이 제한은 많은 브라우저에서 초점을 맞출 수 있는 요소를 둘러싼 기본 사각형 윤곽선에서 비롯됩니다.

대체 솔루션: Box-Shadow 수용

div에서 둥근 윤곽선 모서리의 효과를 시뮬레이션하려면 요소를 사용하려면 상자 그림자 활용을 고려하세요. 특정 치수의 상자 그림자를 전략적으로 적용하면 둥근 윤곽선의 환상을 만들 수 있습니다.

구현:

다음은 부드러운 윤곽선을 구현하는 방법의 예입니다. 상자 그림자를 사용한 윤곽선:

<input class="text1">

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

.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

더 강한 "윤곽선" 효과를 얻으려면 상자 그림자 크기는 다음과 같습니다.

.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

위 내용은 Div 요소의 윤곽선 모서리가 둥글게 표시될 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!