[css] CSS에서 자녀가 부모의 곡선 테두리를 준수하도록 강제

Program / 글쓴이

다른 div 안에 div가 있습니다. #outer그리고 #inner. #outer곡선 테두리와 흰색 배경이 있습니다. #inner곡선 테두리와 녹색 배경이 없습니다. #inner의 곡선 경계를 넘어 확장됩니다 #outer. 어쨌든 이것을 막을 수 있습니까?

#outer {
        display: block; float: right; margin: 0; width: 200px;
        background-color: white; overflow: hidden;
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    #inner { background-color: #209400; height: 10px; border-top: none; }
 <div id="outer">
        <div id="inner"></div>
        <!-- other stuff needs a white background -->
        <!-- bottom corners needs a white background -->
    </div>

스 니펫 확장

아무리 노력해도 여전히 겹칩니다. 어떻게 만들 수 있습니다 #inner에 순종하고 채우기 #outer의 경계?

편집하다

다음 해킹은 현재 목적을 달성했습니다. 그러나 문제는 (CSS3 및 웹 브라우저 작가에게) 아마도 자식 요소가 부모의 곡선 테두리를 따르지 않고 강제로 적용 해야하는 이유는 무엇입니까?

내 필요에 따라이 문제를 해결하기위한 해킹으로 곡선을 개별 테두리에 할당 할 수 있습니다. 내 목적을 위해 내부 요소의 맨 위 두 개에 곡선을 지정했습니다.

#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}

답변

사양에 따르면 :

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

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

이것은 overflow: hidden켜짐 #outer이 작동해야 함을 의미합니다 . 그러나 Firefox 3.6 이하에서는 작동하지 않습니다. 이것은 Firefox 4에서 수정되었습니다.

둥근 모서리가 이제 내용과 이미지를 자릅니다 (오버플로 : 표시가 설정되지 않은 경우).

https://developer.mozilla.org/en/CSS/-moz-border-radius

따라서 여전히 수정 사항이 필요합니다. 

#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}

여기에서 작동하는지 확인하십시오 : http://jsfiddle.net/VaTAZ/3/

답변

이것에 무슨 문제가 있습니까?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

답변

바닥에 날카로운 모서리를 원하면 다음을 사용하십시오.

왼쪽 상단 반경 : 10px;
경계 상단 오른쪽 반경 : 10px;

-경계 경계 반경-왼쪽
-경계 경계 반경-오른쪽

답변

내부 div에 상대적인 position : relative를 만들어 보셨습니까?

그건:

#inner { 
    background-color: #209400; 
    height: 10px;
    border-top: none;
    position: relative;
    left: 15px;
    top: 15px;
}

답변