2015-11-21 73 views
0

當我有一個divborder radiusoverflow hidden包含一個內部div從邊界的「反鋸齒」似乎影響內部分區。從容器衝擊內部分區的邊界半徑

一個例子是比千言萬語更好:

JSfiddle example:

.container{ 
    border:1px solid black; 
    height:2rem; 
    width:9rem; 
    /**/ 
    overflow: hidden; 
    border-radius:0.4rem 0 0 0 ; 
} 
.sub{ 
    /*border-radius:0.4rem 0 0 0 ;*/ 
    background:purple; 
    width:2rem; 
    height:100%; 
} 

<div class="container"> 
    <div class="sub"> 


    </div> 
</div> 

因此,它是挺難看的,但如果你放大到像素級別是相當明顯的。我知道這是挑剔的,但我看到它,它很煩人。

所以我想知道什麼可能是解決方案呢?

我試着在內部div上設置z-index而沒有運氣。

+0

您能解釋一下您期望的輸出嗎? – WisdmLabs

+2

這正是您需要解釋的內容:http://tanalin.com/zh/blog/2011/08/border-radius-rendering/ – TheUknown

回答

3

這是溢出問題:hidden;線。我的解決方案有點棘手。該容器具有邊框大小,但子div沒有,所以這個修改的子實際上比您的更寬1px和2px,與容器div具有相同的高度。

我將.sub改爲帶有黑色邊框和邊框半徑的絕對div,然後將其置於-1px頂部並向左隱藏(實際上,3個邊框正好位於容器的3個邊框的頂部div).sub的黑色邊框(請記住將sub div的border-right設置爲none/0)。這樣,我們得到你想要的。

.container{ 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    height:2rem; 
 
    width:9rem; 
 
    border:1px solid black; 
 
    border-radius: 0.4rem 0 0 0; 
 
} 
 
.sub{ 
 
    position: absolute; 
 
    top: -1px; 
 
    left: -1px; 
 
    box-sizing: initial; 
 
    display: block; 
 
    background:purple; 
 
    width:2rem; 
 
    height:100%; 
 
    border:1px solid black; 
 
    border-right: 0; 
 
    border-radius: 0.4rem 0 0 0; 
 
}
<div class="container"> 
 
    <div class="sub"> 
 
      
 
     
 
    </div> 
 
</div>

1

這不是最理想的解決方案,但你可以申請一個嵌入式箱的影子,然後利用定位的z-index子元素。由於影子插圖,則需要calc()寬度佔多餘空間:

https://jsfiddle.net/qob6qjc6/7/

https://jsfiddle.net/qob6qjc6/6/

.container{ 
    box-shadow: inset 0 0 0 1px #000; 
    height: calc(2rem + 2px); 
    width: calc(9rem + 2px); 
    overflow: hidden; 
    border-radius:0.4rem 0 0 0; 
} 
.sub{ 
    background:purple; 
    width:2rem; 
    height:100%; 
    position: relative; 
    z-index: -1 
} 

此,如果你堆在z順序父打破

.container{ 
    box-shadow: inset 0 0 0 1px #000; 
    height: calc(2rem + 2px); 
    width: calc(9rem + 2px); 
    overflow: hidden; 
    border-radius:0.4rem 0 0 0; 

    position: relative; 
    /* as soon as you set the z-index on the parent, it breaks */ 
    z-index: 1; 
} 
.sub{ 
    background:purple; 
    width:2rem; 
    height:100%; 
    position: relative; 
    z-index: -1 
}