CSS에서 내부 상자와 테두리 모두에 둥근 모서리를 만드는 방법은 무엇입니까?

내부 상자와 테두리 모두에 둥근 모서리를 만드는 방법

CSS에서는 border-radius를 사용하여 둥근 모서리를 적용할 수 있습니다. 픽셀 또는 백분율 단위의 값을 허용하는 속성입니다. 그러나 이 속성을 사용하여 내부 상자와 테두리 모두에 둥근 모서리를 만드는 경우 테두리 너비의 영향을 고려해야 합니다.

내부 테두리 반경 계산

내부 테두리 반경을 계산하려면 외부 테두리 반경에서 테두리 너비를 뺍니다. 이렇게 하면 테두리가 둥근 모양을 유지하면서 상자의 내부 모서리가 원하는 원형을 갖게 됩니다.

예를 들어 외부 테두리 반경이 6px이고 테두리 너비가 5px인 경우 내부 테두리 반경은 다음과 같아야 합니다.

inner border radius = 6px - 5px = 1px

CSS 코드 조정

제공된 코드에서 다음과 같이 변경해야 합니다.

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }

이렇게 하면 조정됩니다. 외부 테두리 반경을 6px로 설정합니다. 내부 테두리 반경을 허용하려면 배경 클립 속성을 제거하거나 테두리 상자로 설정해야 합니다.

.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); }

레이어링 및 테두리

별도의 상자가 있는 경우 테두리에 사용되는 경우 border-radius 속성은 테두리 상자와 내부 상자 모두에 적용되어야 합니다. 또는 더 효율적인 접근 방식은 내부 상자 자체 내에서 테두리를 관리하는 것입니다.

일반 테두리

둥근 모서리를 여러 상자에 일관되게 적용하려면 .rounded-borders와 같은 클래스를 사용하여 해당 요소에 적용합니다.

.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

<div>

위 내용은 CSS에서 내부 상자와 테두리 모두에 둥근 모서리를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!