【问题标题】：How can I add outer rounded corners to a div?如何将外圆角添加到 div？
【发布时间】：2013-04-17 09:28:40
【问题描述】：

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

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

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

转动这个：

进入这个：

标记：

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

【问题讨论】：

标签： html css twitter-bootstrap less

【解决方案1】：

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

用法如下：

    .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 example

【讨论】：

是的，我一直在使用引导程序中的.border-top-right-radius(10px); mixin，但我不知道如何使“空”角的背景与我的示例中的.middle 相同.
@Ryan 你只会在所有东西后面都有一个包装器 - 让我试着用你的代码给你一个例子。
@Ryan 最新更新应该完全符合您的要求。如果不能随时让我知道，但这应该可以解决问题:)
干得好！巧妙地使用侧边栏背景。看看我是否可以在生产中使用它。谢谢。
是的，可以。只是试图让它首先在生产中工作。很快。

【解决方案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;
}

【讨论】：

是的！这就是我要找的。我会玩弄这个以确保，但这可能会奏效！谢谢。
那真的很棒的答案！谢谢！但是如果我们需要用一些渐变色或图像背景填充白色呢？

【解决方案3】：

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

【讨论】：

但是如何选择角落的背景颜色呢？
我不确定角落的背景是什么意思。如果您希望可以通过 box-shadow 属性放置阴影，它的颜色将与“背景颜色”相同。
因此，如果我在上面的.top div 中添加边框半径，它将绕过已经是白色的 div 的角。但我需要角落是灰色的。其余的都是白色的。灰色看起来是.middle 的一部分。
你可以做几件事。如果在顶部 div 下方您有一个相同大小的灰色背景 div，则角落将显示为灰色。另一种选择是将内容作为容器 div 并将其他顶部中间和底部放在其顶部。这样，角落也会显示为灰色。

【解决方案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');
  });
});

【讨论】：

【解决方案5】：

使用 CSS3 border-radius。

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

【讨论】：