不尋常的圓角標記

我試圖用一個盒子在另一個盒子裏構建一個簡單的佈局，但是，當外部盒子有四個圓角時，內部只有那些右側。不尋常的圓角標記

我會添加我開始與基本標記只是爲了fullfill的SO要求，但它更容易看到everything in action：

<div id="wrapper"> 
    <div id="left"> 
    <div class="placeholder">Placeholder</div> 
    </div> 
    <div id="main"></div> 
</div>

內眼角不完全圓形的，雖然我知道，原因是因爲我沒有爲那個元素定義任何其他的邊框，所以如果我這樣做的話，最後我不可能有一個平滑的方式（外部在左邊變粗）的所有邊框。

我獲得的最接近是this one，使得無論左邊界，內部和外部，3px的具有所需6像素但近角上的區域明顯更薄，這不是我的初衷。

作爲一個額外的好奇心，當我試圖繞左內邊界時，我最終搞亂了所有東西，空間更靠近角落。爲什麼是這樣？

來源

2016-11-15 user5613506

是[this]（https://jsfiddle.net/zwjyjzxa/）你想要什麼？ – raina77ow

差不多。左側是完美的，即使沒有你可以在我的身上看到的非常微妙的黑色邊框。但右側，頂部和底部的曲線應該更清晰可見，表明它們確實是彎曲的。我想這是因爲你讓他們** 12px **而不是** 20px **^_ ^ – user5613506

雖然我不是相對/絕對定位的忠實粉絲，在這種情況下使用它們似乎是什麼，我需要解決的問題：

body { 
 
    background-color: #000; 
 
    margin: 35px 35px 35px 50px; 
 
} 
 

 
#wrapper { 
 
    -webkit-border-top-right-radius: 20px; 
 
-webkit-border-bottom-right-radius: 20px; 
 
     -moz-border-radius-topright: 20px; 
 
    -moz-border-radius-bottomright: 20px; 
 
      border-top-right-radius: 20px; 
 
     border-bottom-right-radius: 20px; 
 

 
    border: 6px solid #0A1818; 
 
    margin-left: 20px; 
 
    min-height: 500px; /* demo only */ 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
#left { 
 
    -webkit-border-radius: 35px; 
 
     -moz-border-radius: 35px; 
 
      border-radius: 35px; 
 

 
    background-color: #051113; 
 
    border: 6px solid #0A1818; 
 
    left: 35px; 
 
    min-height: 500px; /* demo only */ 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 30%; 
 
    z-index: 2; 
 
}

<div id="left"> 
 

 
    <div class="placeholder">Placeholder</div> 
 

 
</div> 
 
    
 
<div id="wrapper"> 
 

 
    <div id="main"></div> 
 

 
</div>

我希望它幫助未來的人:)

來源

2016-11-17 10:34:06 user5613506

不尋常的圓角標記

回答

相關問題