상속 테두리 반경으로 배경 오버플로를 해결합니다

CSS의 흥미로운 (그러나 성가신) 특징은 자식 요소의 배경이 부모 요소의 둥근 테두리를 넘칠 수 있다는 것입니다. 예를 들어, 내부 요소가 포함 된 카드는 내부 요소가 설정되면 배경이 카드의 테두리를 넘칠 수 있습니다.

일반적 으로이 문제를 해결하는 가장 쉬운 방법은 카드 요소에

속성을 ​​추가하는 것입니다. 나는 이것이 대부분의 사람들 이이 상황에 직면 할 때 생각하는 첫 번째 해결책이라고 생각합니다.

그러나 이렇게하면 새로운 문제가 발생합니다. 카드 요소 외부의 내용이 잘려됨에 따라 마이너스 마진을 사용하거나

를 사용하여 자식 요소의 내용을 카드에서 옮기는 것은 불가능합니다. overflow: hidden 어린이 요소의 배경이 부모 요소의 둥근 테두리를 넘치지 않도록 약간 번거롭지 만 더 효과적인 방법이 있습니다.

가장 쉬운 방법은 자식 요소가 부모 요소의 둥근 테두리를 물려 받도록하는 것입니다.

의 약어가 너무 길면 상황에 따라 4 개의 모서리의 둥근 모서리 반경을 물려받을 수 있습니다. position: absolute 또는 논리적 특성을 기꺼이 사용하려는 사람들의 경우 여기에 동등한 코드가 있습니다. (논리적 특성에 대한 이해를 쉽게하려면 및 및

로, 로 바꾸십시오.)

왜 카드에 직접 배경을 적용하지 않습니까?

요소 자체가 를 포함하고 배경을 직접 설정하면 동일한 효과를 달성 할 수 있습니다. 그렇다면 왜 이렇게하지 않습니까?

.child {
  border-radius: inherit;
}

글쎄, 때때로 당신은 그것을 할 수 없습니다. 예를 들어, 요소가 두 부분으로 나뉘어지면 그 일부만이 색상이 표시됩니다.

왜 우리는 이것을해야합니까? border-radius 대기가 가장 좋은 이유 일 수 있습니다. 적어도 둥근 반경 조정 체계를 사용할 때 나중에 문제가 발생하지 않을 것입니다.

이 모드는 CSS 앵커 포지셔닝이 완전히 지원 될 때 특히 유용합니다. 나는 이것이 곧 1-2 년 안에 팝업 포지셔닝의 표준이 될 것으로 기대합니다.

.child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

즉, 팝업의 경우 개인적으로 팝업 내용을 문서 스트림에서 옮기고 직접 자식 요소로

요소에 넣는 것을 선호합니다. 이렇게하면 앵커 위치를 사용할 때 top가 팝업을 자르지 못하게 할 수 있습니다. left

위 내용은 상속 테두리 반경으로 배경 오버플로를 해결합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!