CSS圓角

Question

我有這樣的代碼http://jsfiddle.net/Kbzgd/我想要做的是在右上角有它的圓潤效果藏漢...

但如果我刪除底部邊框和將邊框添加到像邊框一樣的內容中，活動選項卡在底部獲得邊框，並且我不想要那個= \

我想要這樣，但是右上角有圓角，有可能嗎？

感謝

Answer 1

上.tab_content_container

嘗試border-top-right-radius: 5px後，我加入這個多一點小提琴演奏：

border-top-right-radius: 6px; 
border-top: 1px solid #CCC; 
position: relative; 
top: -1px; 
z-index: -10; 

所以右側角球看起來更好一點。另一種方法是使用box-shadow: 0 -1px 0 0 #CCC（div上方的陰影）而不是border-top和top的值。

編輯：一些更多的編輯後，我擺脫了點點伸出（如果你用上面的幾個例子仔細觀察你會看到）。

你所要做的就是刪除ul上的邊框（只要你在ul後面設置了z-index就可以使用div的邊框/陰影工作正常）。請注意，當您移動邊框時，它會稍微移動一點，所以您可以將position: relative; top: 1px;設置回ul。

我給了多個選項，因爲我不知道如果有什麼將你的代碼的其餘部分衝突。

這是我的最後CSS：

ul.tabs { 
    border-bottom: 1px solid rgba(0, 0, 0, 0); /*this is an alternative which sets the border to be transparent*/ 
    float: left; 
    height: 29px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

.tab_content_container { 
    background: #fff; 
    border-radius: 0 0 5px 5px; 
    border: 1px solid #ccc; border-top: none; 
    clear: both; 
    float: left; 
    width: 100%; 
    border-top-right-radius: 6px; 
    /*border-top: 1px solid #CCC; 
    /*top: -1px; again some alternatives*/ 
    position: relative; 
    z-index: -10; 
    box-shadow: 0 -1px 0 0 #CCC 
} 

Answer 2

這裏：http://jsfiddle.net/2CVNj/ 增加周圍的選項卡一個新的div使用overflow: auto solution清除浮動，然後移動在內容上的邊界，並與一些撥弄Z-索引。很好地工作。