상위 DIV의 둥근 모서리가 하위 DIV에 영향을 미치지 않습니다.

Question

그래서 CSS3에서 둥근 모서리를 사용하여 실험하고 있습니다 (Internet Explorer에서는 작동하지 않으며 상관 없습니다). 꽤 좋은 찾고 있습니다. 내가 가지고있는 문제는 부모의 둥근 모서리에 의해 "가면을 쓰지"않는 자식 DIV가 있다는 것입니다. 나는 둥근 모서리를 상속받을 아이를 찾고있는 것이 아닙니다. 나는 마치 마스킹 된 것처럼 반올림되는 곳에 보이지 않도록 부모 안쪽의 모든 콘텐츠를 갖고 싶습니다. "overflow : hidden;"을 사용해 보았지만 트릭을 수행하지 않는 것 같습니다.

둥근 모서리 처리 컨테이너 DIV의 하위 항목이 부모 DIV에 의해 어떻게 분류 될 수 있는지 아이디어가 있습니까? 그것이 어떤 용도의 것이라면, 나는 "position : absolute;"를 사용하고 있습니다. 부모 DIV에. 그것이 어떤 차이를 만들 것인지 확실하지 않습니다.

감사합니다.

Answer 1

div에 패딩을 사용하십시오. 패딩을 반경과 같게 만들면 반올림되거나 반올림 된 영역에 나타나는 내용에 대해 걱정할 필요가 없습니다.

<style> 
.round{ 
border-radius:10px; 
padding:10px; 
background-color:red; 
} 
</style> 

<div class="round">Rounded Corners</div> 

다음은 CSS3 테두리 반경 : http://www.css3.info/preview/rounded-border/에 대한 모든 정보를 제공하는 유용한 사이트입니다.

Answer 2

부모 요소에 overflow: hidden;을 추가하십시오. 이 문제가 해결되었습니다.