Html div 的弯角边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/362038/
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
Curved corner border for a div
提问by praveenjayapal
I need to build a div with curved corner border, with out using any images in the corner. Is it possible?
我需要构建一个带有弯曲角边框的 div，而不使用角落中的任何图像。是否可以？
I dont want to insert curved images in the corner, Please help me regarding this.
我不想在角落插入弯曲的图像，请帮我解决这个问题。
回答by jimg
If you want to rely on webkit and mozilla browsers, you can use the following css commands:
如果要依赖webkit和mozilla浏览器，可以使用如下css命令：
.radius {
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
}
Details can be viewed here.
详情可在此处查看。
info on the CSS2 spec border-radius can be found here
These unfortunately do not work for ie.
不幸的是，这些不适用于 ie。
you could go a javascript route for IE only by using niftycubewhich has the added benefit of supporting column height leveling without problems.
您只能通过使用niftycube来为 IE 使用 javascript 路由，它具有支持列高度调平而没有问题的额外好处。
回答by Derek P.
Try this library out, it did wonders for me! It is a tested cross browser solution.
试试这个库，它为我创造了奇迹！这是一个经过测试的跨浏览器解决方案。
回答by alex
You can use CSS to achieve rounded corners in modern browsers...
您可以使用 CSS 在现代浏览器中实现圆角...
border-radius: 10px;
This is known as progressive enhancement. IMO, this is better than images and or CSS tricks with margins and borders. Unless you absolutely must have rounded corners.
这称为渐进增强。IMO，这比带有边距和边框的图像和/或 CSS 技巧要好。除非你绝对必须有圆角。
回答by Sal
Here's one I wrote that you're welcome to use if you like it. It renders a rounded-corner box of any dimensions with a background color but not a border around the entire box. It is for white page backgrounds, but that can be changed by editing the border color in the c1,c2 & c3 styles.
这是我写的一篇，如果你喜欢，欢迎你使用。它使用背景颜色呈现任何尺寸的圆角框，但没有围绕整个框的边框。它用于白色页面背景，但可以通过编辑 c1、c2 和 c3 样式中的边框颜色来更改。
.rounded {background-color:#f1f0f1}
.rounded .inner {padding:8px 10px 8px 12px}
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px}
<div class="rounded" style="width:200px;height:100px">
<div class="c1"></div><div class="c2"></div><div class="c3"></div>
<div class="inner">
-- Content Here --
</div>
<div class="c3"></div><div class="c2"></div><div class="c1"></div>
</div>
回答by Jon Galloway
I'd use a jQuery plugin to handle rounded corners. Here's the list of available rounded corner plugins on the jQuery site: http://plugins.jquery.com/taxonomy/term/189
我会使用 jQuery 插件来处理圆角。以下是 jQuery 站点上可用圆角插件的列表：http: //plugins.jquery.com/taxonomy/term/189
