html - 如何将外圆角添加到 div？

Question

我希望将“外”圆角添加到选定的侧边栏项目，以使该项目很好地“倾注”到内容中。

在下面的示例中，我希望.top具有灰色背景的圆形右下角，以及.bottom. 你怎么看？

我正在使用 Twitter Bootstrap 和 LESS，如果这样更容易的话。

jsfiddle：http: //jsfiddle.net/3YXb2/

转这个：

进入这个：

标记：

<div class="wrapper">
    <div class="sidebar">
        <div class="top">
            <p>Top</p>
        </div>
        <div class="middle">
            <p>Middle</p>
        </div>
        <div class="bottom">
            <p>Bottom</p>
        </div>
    </div>
    <div class="container">
        <p>Content</p>
    </div>
</div>

CSS：

body {
    margin:10px;
}
div {
    margin:0;
    margin-right:-4px;
    padding:0;
    display:inline-block;
    vertical-align:middle;
}
.wrapper {
    width:100%;
    display:block;
    border:1px solid;
}
.container {
    background-color:gray;
    width:70%;
    height:300px;
}
.sidebar {
    background-color:white;
    width:30%;
    height:300px;
}
.middle {
    background-color:gray;
}
.top,.middle,.bottom {
    width:100%;
    height:100px;
    display:block;
}
p {
    padding:40px 0 0;
    margin:0;
    text-align:center;
}

Answer 1

CSS3 提供该border-radius属性。但是，请注意这不适用于 IE8 或任何更低版本。有可用的技巧；但他们就是这样：黑客。

用法如下所示：

    .sidebar {
        background-color:gray;
        width:30%;
        height:300px;
    }
    .middle {
        background-color:gray;
    }
    .top,.middle,.bottom {
        width:100%;
        height:100px;
        display:block;
    }
    .top{
        background: white;
        border-bottom-right-radius:10px;
    }
    .bottom{        
        background: white;
        border-top-right-radius: 10px;
    }

jsFiddle 示例

Answer 2

如果我理解正确，您正在寻找一个倒置的边界半径。这是你的想法吗？

http://jsfiddle.net/3pW2M/

例如，如果白色区域需要透明以显示背景图像，这将不起作用。

.top {
    position: relative;
}

.topcorner {
    position: absolute;
    margin: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    width: 50px;
    background: gray;
}

.topcorner:after {
    content: '';
    position: absolute;
    height: 50px;
    width: 50px;
    background: white;
    border-radius: 0 0 50px 0;
}

Answer 3

你可以使用 CSS 的边框半径。你可以在这里看到一个在线圆形边框生成器：http: //border-radius.com/

Answer 4

我假设某些类型的用户交互、导航、选项卡、分机都需要这个。所以我将它设置在 jquery 悬停功能上- jsFiddle

$(document).ready(function () {
  $('.top').hover(function () {
    $('.middle').toggleClass('notSelect2');
    $('.bottom').toggleClass('notSelect3');
  });

  $('.middle').hover(function () {
    $('.top').toggleClass('notSelect');
    $('.bottom').toggleClass('notSelect2');
  });

  $('.bottom').hover(function () {
    $('.middle').toggleClass('notSelect');
    $('.top').toggleClass('notSelect3');
  });
});

Answer 5

使用 CSS3边框半径。

  .top
     {
       border-bottom-right-radius: 3px;
       -moz-border-radius-bottomright: 3px;
       -webkit-border-bottom-right-radius: 3px;
     }

 .bottom
    {
      border-top-right-radius: 3px;
      -moz-border-radius-topright: 3px
      -webkit-border-top-right-radius: 3px;
    }