如何将外圆角添加到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或更低版本。有 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

Answer 2

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

Answer 3

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

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

您想使用border-radius及其变体。

EG

border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px; 

这里的好工具： http://www.cssportal.com/css3-rounded-corner/

Answer 6

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