Html 如何将外圆角添加到 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16181669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I add outer rounded corners to a div?
提问by Ryan
I'm looking to add "outer" rounded corners to the selected sidebar item to give the effect that this item is "pouring" into the content well.
我希望将“外”圆角添加到选定的侧边栏项目，以产生该项目很好地“倾注”到内容中的效果。
In my example below, I'd like the .topto have a rounded bottom-right corner with a gray background, along with a similar top-right corner for the .bottom. What do you think?
在下面的示例中，我希望.top有一个带灰色背景的圆角右下角，以及类似的右上角.bottom。你怎么认为？
I'm using Twitter Bootstrap and LESS, if that makes it easier.
我正在使用 Twitter Bootstrap 和 LESS，如果这更容易的话。
jsFiddle: http://jsfiddle.net/3YXb2/
jsFiddle：http: //jsfiddle.net/3YXb2/
Turn this:
转这个：
Into this:
进入这个：
Markup:
标记：
<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:
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;
}
回答by What have you tried
Css3 offers the border-radiusproperty. However, please note that this is not available for IE8 or any version lower. There are available hacks; but they are just that: hacks.
CSS3 提供了该border-radius属性。但是，请注意，这不适用于 IE8 或任何更低版本。有可用的黑客；但他们只是：黑客。
Usage looks like this:
用法如下所示：
.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
jsFiddle 示例
回答by beebee
you may use border-radius of CSS. you can see an online round border generator here: http://border-radius.com/
您可以使用 CSS 的边框半径。你可以在这里看到一个在线圆形边框生成器：http: //border-radius.com/
回答by Magnus Magnusson
If I understand you correctly you're looking for an inverted border radius. Is this what you have in mind?
如果我理解正确，您正在寻找倒置的边界半径。这是你的想法吗？
This will not work if the white area needs to be transparent to show a background image for instance.
例如，如果白色区域需要透明以显示背景图像，这将不起作用。
.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;
}
回答by apaul
I'm assuming that this will be needed for some sort of user interaction, navigation, tabs, ext. So I set it up on a jquery hover function- jsFiddle
我假设某种用户交互、导航、选项卡、ext 将需要它。所以我将它设置在 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');
});
});
回答by Rid Iculous
You want to use border-radius and it's variants.
您想使用 border-radius 及其变体。
EG
例如
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
Nice tool for this here: http://www.cssportal.com/css3-rounded-corner/
回答by Jude Duran
Use the CSS3 border-radius.
使用 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;
}
