圓角圓角？

-1

我目前遇到了一部分佈局問題。圓角圓角？

我的佈局容器是白色的圓角和陰影（這是工作得很好）。

事情是，我有一個淺灰色的容器div內的頁腳部分。我希望這個div的底角會被容器四捨五入，但它們是正方形的並且與容器div的圓角重疊。

有什麼辦法可以繞過頁腳div的底角嗎？

這裏是我的CSS：

.container { 
    clear: both; 
    margin: 20px auto; 
    width: 940px; 
    background: #fff; 
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); 
    position: relative; 
    z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */ 
    *zoom: 1; 
} 

.site-footer{ 
    padding-top: 10px; 
    background: #f6f6f6; 
}

HTML

<div class="containter"> 
    Test Text... 
    <div class="site-footer"> 
     Footer text... 
    </div> 
</div>

問題可以在我的網站here觀看。

來源

2013-07-29 nellygrl

我刪除了鏈接到您的網站，因爲您提到的容器樣式不在該頁面上。 – FakeRainBrigand

包含導致問題的HTML。您也正在使用Bootstrap，這對如何解決這個問題有影響。 –

FakeRainBrigand：對不起，我忘了將/ tester /添加到最後。我正在設計一個測試目錄。我的錯。 – nellygrl

將overflow: hidden;添加到您的.container樣式中。

CSS

.container { 
    ... 
    overflow: hidden; 
    .... 
}

Demo

來源

2013-07-29 00:51:13 3dgoo

非常感謝！這就是訣竅！ – nellygrl

@Noelle，你可能需要'overflow-x：hidden'。我的屏幕上有一個滾動條用於顯示'.container'。或者修復這個問題 - Chrome穩定版，所有瀏覽器大小。 – FakeRainBrigand

@FakeRainBrigand我剛剛修改我的CSS有overflow-x：hidden。滾動條現在還在嗎？ – nellygrl

有沒有什麼辦法可以圓頁腳div的底角？

是的。

border-bottom-left-radius: /* */; 
border-bottom-right-radius: /* */;

來源

2013-07-29 00:59:05

回答

相關問題