HTML/CSS 圆角矩形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7219848/
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
HTML/CSS Rounded Rectangles?
提问by Duncan Palmer
Is it possible to create a rectangle with rounded edges without using an image? For example:
是否可以在不使用图像的情况下创建带圆角的矩形？例如：
Thank you.
谢谢你。
回答by AlphaMale
This is a good tutorial to understand rounded border for any div:
这是一个很好的教程，可以了解任何 div 的圆形边框：
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/rounded-border/
Or you can round a border of a certain div like this:
或者你可以像这样围绕某个 div 的边框：
#div1 {
-moz-border-radius: 15px; //for mozilla support
-webkit-border-radius: 15px; //for chrome support
border-radius: 15px;
}
in a nut shell:
简而言之：
You can combine these as you like. -webkit-... will only be recognized by WebKit browsers (Chrome, Safari), -moz-... will only be recognized by Mozilla-based browsers (Firefox.)
您可以根据需要组合这些。-webkit-... 只会被 WebKit 浏览器（Chrome、Safari）-moz-识别，... 只会被基于 Mozilla 的浏览器（Firefox）识别。
EDIT:
编辑：
You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:
您只能将 border-radius 应用于 td，而不是 tr 或 table。我已经通过使用这些样式解决了圆角桌的这个问题：
table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:first-child td:last-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:first-child { -webkit-border-top-left-radius: 15px; }
tr:last-child td:last-child { -webkit-border-top-left-radius: 15px; }
Hope this helps.
希望这可以帮助。
回答by Paul
Something like this, with your own customizations:
像这样的东西，有你自己的定制：
HTML
HTML
<div class="outer">
<div class="top">Settings</div>
This is some text. It is part of an example of rounded borders in css. It is two lines long by now, I suppose.
</div>
CSS
CSS
div.outer{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
overflow: hidden;
background-color: #333;
color: #8AF;
padding: 0px 20px;
}
div.outer .top{
margin: 0px -20px;
padding: 0px 20px;
background-color: #8AF;
color: #000;
}
回答by Ackar
You can use the css property border-radius.
您可以使用 css 属性border-radius。
However it is not supported on older browser.
但是，旧浏览器不支持它。
回答by Rhys
Here are some examples and also browser support info.
以下是一些示例以及浏览器支持信息。
border---radius: [ | <%> ] [ | <%> ]?
border- --radius：[| <%> ] [ | <%> ]？
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
height: 150px;
Width:150px;
}
Real World Example: This should show a grey box with rounded corders in most browsers except IE < 7
真实世界示例：这应该在大多数浏览器中显示一个带有圆形编码器的灰色框，IE < 7 除外
HTML
HTML
<div id="RoundCorners">
</div>
CSS
CSS
#RoundCorners
{
border-radius: 15px;
moz-border-radius: 15px; //If using Firefox
background-color: #333;
}
At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).
目前 Opera（版本 10.5 以上）、Safari（版本 5 以上）和 Chrome（版本 5 以上）都支持当前 W3C 规范中原生定义的各个 border-*-radius 属性和 border-radius 简写属性（尽管有在诸如边框样式转换、使用长度百分比等问题上仍然是突出的错误）。
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
Mozilla Firefox（版本 1.0 以上）支持带 -moz- 前缀的 border-radius，尽管 Mozilla 实现与当前的 W3C 规范（见下文）之间存在一些差异。
Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.
更新：最近的 Firefox nightly 版本支持无 -moz- 前缀的 border-radius。
Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).
Safari 和 Chrome（以及其他基于 webkit 的浏览器）从版本 3 开始支持带有 -webkit- 前缀的 border-radius（从版本 5 开始不再需要），尽管与当前规范存在一些差异（有关更多详细信息，请参阅本文旧版本的 Webkit 如何处理边界半径）。
Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).
甚至微软也承诺并在他们最近的预览版中展示了从 Internet Explorer 9 开始（无前缀）对边界半径的支持。
回答by Vitali Pom
Make a rectangle clip and place a rectangle with thick and round border over it.
制作一个矩形剪辑并在其上放置一个带有粗圆边框的矩形。
