왜 배경이 둥근 모서리에 겹쳐 있습니까? 내가 CSS는 둥근 모서리를 사용하는 경우

Question

, 그들은 다음과 같이하고, 중대 :

http://www.incompetence-central.co.uk/roundedcorners-nobg.png

하지만 (이 경우 간단한 <p> 태그)를 그 내부 요소의 배경색을 지정하는 경우

http://www.incompetence-central.co.uk/roundedcorners-bgcolor.png

가 어떻게 그들에 배경 색상 그리기없이 내 꽤 둥근 모서리를 유지할 수 있습니다 : 배경 색상과 같이, 둥근 모서리를 오버레이? 나는 내부의 요소에 대해 같은 둥근 모서리를 지정했지만, 내가 배경색이 완전히 공간을 채우기하지 않습니다 할 경우 :

http://www.incompetence-central.co.uk/roundedcorners-hack.png

Answer 1

약간의 수학도 경계 폭을 고려하여 도움이 될 수 있습니다. 테두리 반경이 5 픽셀이고 테두리 폭이 1 픽셀 인 경우 내부 요소에는 테두리 반경 4 픽셀 (5 픽셀 -1px 테두리)을 사용해야합니다. 실험하고보십시오.

Answer 2

는 내부 요소의 배경 색상을 지정하지만,하지 마십시오 그 특정 요소 (경계선 포함).

Answer 3

왜 외부 요소의 배경색을 테두리와 동일하게 설정하지 않으시겠습니까? 그렇게하면 이미지에서 보는 것처럼 구석에 작은 흰색 공간이 생기지 않게됩니다.

절대 완벽하지는 않지만 완벽하게 접근 할 수 있으므로 탐색하는 사용자는 차이점을 볼 수 없습니다.