테두리 반경이 콘텐츠를 잘라야합니까?

테두리 반경이 콘텐츠를 잘라야합니까?

---

용기에 내용물이있을 때 내용물이 잘리지 border-radius않나요?

샘플 HTML 및 CSS :

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

.progressbar { height: 5px; width: 100px; border-radius: 5px; }
.buffer { width: 25px; height: 5px; background: #999999; }

보시다시피 border-radius컨테이너 ( .progressbar)에서 사용 하지만 콘텐츠 ( .buffer)는 컨테이너 '외부'로 이동합니다 . Chrome에서이 문제가 나타납니다.

이것이 예상되는 동작입니까?

추신 이것은 그것을 고치는 방법에 관한 것이 아니라 이렇게 작동해야하는지에 관한 것입니다.

---

이것이 예상되는 동작입니까?

예, 말처럼 들리지만 실제로는 그렇습니다. 그 이유는 다음과 같습니다.

기본 overflow에 대한 <div>요소 (대부분의 다른 것들)입니다 visible, 그리고 스펙 에 대해 이렇게 말한다 overflow: visible:

visible
이 값은 내용이 잘리지 않음을 나타냅니다. 즉, 블록 상자 외부에서 렌더링 될 수 있습니다.

차례로 배경 및 테두리 모듈의 §5.3 모서리 클리핑 은 다음과 같이 말합니다.

테두리 이미지가 아닌 상자의 배경이 적절한 곡선으로 잘립니다 ( 'background-clip'에 의해 결정됨). 테두리 또는 패딩 가장자리에 클리핑되는 다른 효과 (예 : '표시'이외의 '오버플로')도 곡선에 클리핑되어야합니다. 대체 된 요소의 내용은 항상 내용 가장자리 곡선으로 잘립니다. 또한 테두리 가장자리의 곡선 외부 영역은 요소 대신 마우스 이벤트를 허용하지 않습니다.

내가 특별히 강조했다고 문장이 있음을 언급 overflow상자의 값이 아닌 다른 뭔가를해야합니다 visible(수단은 auto, hidden, scroll모서리 위해서는 다른 사람들이) 아이를 클립합니다.

내가 말했듯이 대부분의 시각적 요소의 기본값 인 오버플로가 표시되도록 상자가 정의 된 경우 콘텐츠가 전혀 잘리지 않아야합니다. 그래서의 사각형 모서리가 .buffer의 둥근 모서리를 넘어갑니다 .progressbar.

결과적으로 의 둥근 모서리 .buffer내에서 클립 하는 가장 간단한 방법 은 이 업데이트 된 fiddle에 표시된대로에 스타일을 .progressbar추가하는 것 overflow: hidden입니다 ..progressbar

---

수정이 무엇인지 궁금해하는 사람을 위해. 가장 쉬운 방법은 CSS를 편집하는 것입니다.

주어진 예에서 이것은 적절한 수정입니다.

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

---

의미 상으로는 내부 div에 border-radius inherit 속성을 추가하는 것이 가장 좋습니다. 따라서 새 클래스가 추가됩니다.

.buffer {
    border-radius: inherit;
}

결과적으로 다른 상황에서는 overflow : auto의 사용을 보존 할 수 있습니다. 내용이 frae를 넘치고 모든 것을보고 싶을 때.

---

이 질문은 동일한 결함을 가리키는 것 같습니다. 분명히 이것은 버그입니다.

CSS3 테두리 반경 클리핑 문제

편집하다

Eek! BoltClock은 이것이 의도 된 것이라고 언급 했으므로이 주제에 대한이 다른 SO 질문을 게시하는 동시에 이에 대한 사양 견적도 검색합니다. CSS3를 사용하여 이미지가 둥근 모서리 상자를 넘치지 않도록하려면 어떻게해야합니까?

사양 링크

참고로 관련 링크를 첨부하겠습니다.하지만 귀하가 제공 한 예제에 대한 명시적인 내용은 찾을 수 없습니다.

CSS 배경-둥근 모서리

---

이것이 스펙이 말하는 것이므로 이것이 작동해야하는 방식입니다. 하지만 그렇다고 Chrome이 그렇게한다는 의미는 아닙니다.

5.3. 코너 클리핑

테두리 이미지가 아닌 상자의 배경이 적절한 곡선으로 잘립니다 ( 'background-clip'에 의해 결정됨). 테두리 또는 패딩 가장자리에 클리핑되는 다른 효과 (예 : '표시'이외의 '오버플로')도 곡선에 클리핑되어야합니다. 대체 된 요소의 내용은 항상 내용 가장자리 곡선으로 잘립니다. 또한 테두리 가장자리의 곡선 외부 영역은 요소 대신 마우스 이벤트를 허용하지 않습니다.

http://www.w3.org/TR/css3-background/#border-radius

참고 URL : https://stackoverflow.com/questions/8582176/should-border-radius-clip-the-content