2011-11-08 14 views

答えて

0

2つの方法があります。 1)子要素は変形されていない親要素と同じサイズをとる。次に、親要素にキャストする必要があります

.dc-slick { 

    border: 3px solid red; 
    right: 0px; 
    left: 0px; 
    position: fixed; 
    border-bottom-left-radius: 30px 30px; 
    border-bottom-right-radius: 30px 30px; 
    z-index: 10001; 
    margin-top: 0px; 
    background: black; 
} 

.dc-slick-content { 

    color:white; 
    z-index:9999; 
    width: 100%; 
    height: 200px; 
    border-bottom-left-radius: 15px 15px; 
    border-bottom-right-radius: 15px 15px; 
} 

2)親と同じ方法で拡大縮小する必要があります。

.dc-slick { 

border: 3px solid red; 
    right: 0px; 
    left: 0px; 
    position: fixed; 
    border-bottom-left-radius: 30px 30px; 
    border-bottom-right-radius: 30px 30px; 
    z-index: 10001; 
    margin-top: 0px; 

} 

.dc-slick-content { 

    background: black; 
    color:white; 
    z-index:9999; 
    width: 100%; 
    height: 200px; 
    border-bottom-left-radius: 28px 28px; 
    border-bottom-right-radius: 28px 28px; 
} 
1

子divは、使用するものに関係なく、親のZ-インデックスを継承します。

ここで問題となるのは、境界半径の不一致です。各要素に同じボーダー半径を使用します。そうでなければ、このオーバーラップを取得します。

border-bottom-left-radius: 30px 30px; 
border-bottom-right-radius: 30px 30px; 

Updated example

+0

ボーダー半径は同じにすることはできませんが親要素は子要素よりも大きい(より広い)からである。あなたの例では、ボーダーと子供の黒いbgの間に空白があります。 – Wesley

+0

右のボーダー半径の大きさを把握するために何らかの機能が必要です。 – Wesley

+2

私は、同じ境界半径を使用すると、親と子の間に白い隙間があることが分かりました。ちょっとした手間がかかった後、子要素のボーダー半径が27pxのものが最も効果的でした。ギャップはなく、また親の境界と重複しない。これはちょうどFirefoxの事か親指のルールが常にparent-border-radiusでなければならないかどうかわからない - parent-border-width – gabe3886

0

あなたは、背景色と同じ要素に境界線を持っているので、background: black

.dc-slickから
.dc-slick { 
    background: black; 
} 

.dc-slick-content { 
    /*background: black;*/ 
    /*border-bottom-left-radius: 15px 15px;*/ 
    /*border-bottom-right-radius: 15px 15px;*/ 
} 
JSFidle更新

移動する必要があります:http://jsfiddle.net/RxyRV/