web-dev-qa-db-ja.com

CSSで子を親の曲線の境界線に強制する

別の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とwebbrowserの作者に）立っています：子要素が親の曲線の境界線に従わないのはなぜですか？

今のところ私のニーズのためにこれを回避するためのハックは、個々の境界に曲線を割り当てることができます。そのため、目的のために、内側の要素の上の2つに曲線を割り当てました。

#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;
}
css3css
108
Daniel Bingham

仕様によると：

ボックスの背景は、境界画像ではなく、適切な曲線にクリップされます（「背景クリップ」で決定）。境界線またはパディングエッジにクリップする他のエフェクト（「可視」以外の「オーバーフロー」など）も曲線にクリップする必要があります。 置換された要素のコンテンツは常にコンテンツエッジカーブに合わせてトリミングされます。また、境界エッジのカーブの外側の領域は、要素に代わってマウスイベントを受け入れません。

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

これは、overflow: hidden on #outer動作するはずです。ただし、これはFirefox 3.6以前では機能しません。これはFirefox 4で修正されています。

角が丸くなってコンテンツと画像がクリップされるようになりました（オーバーフローの場合：visibleは設定されていません）。

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/

158
Yi Jiang

下部に鋭いエッジが必要な場合：これらを使用します：

 border-top-right-radius：10px; 
 border-top-right-radius：10px; 
 
-moz-border-radius-topleft 
-moz-border-radius-topright
1
tdtje

これで何が問題になりますか？

#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; 
}
1
Jarrett Widman

内側のdivに対してposition：relativeを作成しようとしましたか？

あれは：

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