콘텐츠가 둥근 모서리를 넘어 확장되는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

콘텐츠가 둥근 모서리를 넘어 확장되는 이유는 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-10 13:11:02

원래의

868명이 탐색했습니다.

Why Does Content Extend Beyond Rounded Corners?

둥근 테두리가 콘텐츠 가시성에 영향을 미치나요?

질문:

왜 콘텐츠가 둥근 테두리(border-radius)가 있는 요소는 컨테이너의 범위를 넘어 확장됩니다. 경계?

샘플 HTML 및 CSS:

.progressbar {
    height: 5px;
    width: 100px;
    border-radius: 5px;
}

.buffer {
    width: 25px;
    height: 5px;
    background: #999999;
}

로그인 후 복사

<div class="progressbar">
    <div class="buffer"></div>
</div>

로그인 후 복사

설명:

기본적으로 콘텐츠는

보이는 오버플로가 적용될 때 요소는 잘리지 않습니다. CSS 사양에는 다음과 같이 명확하게 명시되어 있습니다.

요소(및 대부분의 다른 항목)에 대한 기본 오버플로는 표시되며 사양에는 Overflow: visible:

에 대해 다음과 같이 명시되어 있습니다. 콘텐츠는 잘리지 않습니다. 즉, 블록 상자 외부에 렌더링될 수 있습니다."

CSS 사양에서는 둥근 모서리 잘림이 있는 요소가 배경 이미지에만 영향을 미친다고 설명합니다. 콘텐츠가 아닙니다.

결과:

따라서 눈에 보이는 오버플로가 사용되는 경우 콘텐츠 요소가 컨테이너의 둥근 모서리를 넘어 확장될 수 있습니다.

해결 방법:

콘텐츠가 컨테이너 내에서 잘리도록 하려면 모서리가 둥근 경우 표시되는 것 이외의 오버플로(예: 숨김, 스크롤 등)를 컨테이너에 적용해야 합니다. 이 경우 .progressbar 클래스에 Overflow:hidden을 추가하면 문제가 해결됩니다.

위 내용은 콘텐츠가 둥근 모서리를 넘어 확장되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2392

에서 2024-04-23 00:22:19

2523

에서 2024-04-19 15:37:47

2141

에서 2024-04-18 23:52:34

2017

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

2093