CSS에서 자녀에게 부모의 곡선 경계선을 지키도록 강요

CSS에서 자녀에게 부모의 곡선 경계선을 지키도록 강요

저는 다른 디브 안에 디브가 있습니다.#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/ #국경-

이 말은.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; 
}

간단히 사용할 수 있습니다.

border-radius: 상속;

부모를 따르다

.parent {
 width: 100px;
 height:100px;
 border:1px solid green;
 border-radius: 16px 16px 0 0;
 padding: 10px;
}
.child {
  width:100px;
  height: 100px;
  border: 1px solid red;
  background: blue;
  border-radius: inherit;
}

<div class="parent">
  <div class="child">

</div>
</div>

하단에 날카로운 모서리를 원하는 경우:다음을 사용합니다.

테두리-상단-좌측-radius: px;오른쪽 경계 radius: px 10개;
-moz-경계-radius-좌측-moz-국경-radius-오른쪽으로

이너 디브를 위한 relative 자리를 만드셨나요?

즉,

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

언급URL : https://stackoverflow.com/questions/3714862/forcing-child-to-obey-parents-curved-borders-in-css