Question

我正在尝试使用另一个框内的框架来构建一个简单的布局，但是，外部框的所有四个角都是圆角的，内部框只有右边的那些。

我将添加我刚开始的基本标记，以满足SO要求，但更容易看到everything in action：

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

内角并非完全圆润，虽然我知道原因是因为我没有为该元素定义任何其他边框，如果我这样做，最后，我不能拥有所有边界 6px 以平滑的方式加厚（外部在左侧变厚）。

我获得的最接近的方法是this one，使得左边界，外部和内部， 3px 具有所需的 6px ，但角落附近的区域显然更薄，这不是我的想法。

作为一个额外的，更多的好奇心，当我试图围绕左内边界时，我最终弄乱了所有东西，一个更靠近角落的空间。这是为什么？

Answer 1

虽然我不是相对/绝对定位的最大粉丝，但在这种情况下使用它们似乎是我解决问题所需要的：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我希望将来可以帮助某人：）

不寻常的圆角标记

1 个答案: