HTML/CSS圆角矩形？

Question

是否有可能创建一个拥有圆角的矩形，而不使用图片呢？例如：

Hello, World!

谢谢。

- Duncan Palmer

---

你可能会发现这个网站很有帮助：http://border-radius.com/ - Paul

使用了那个，但是没有使角落变圆。 - Duncan Palmer

你用的是什么浏览器？我怀疑它在IE中不会工作。在其他一些旧版本的浏览器中也可能无法正常工作。 - Paul

我正在使用Google Chrome。 - Duncan Palmer

看起来你并没有真正努力尝试。抱歉。 - Matijs

请更新您的问题，并附上相关的代码截图，甚至可以直接发布您的代码，这样其他用户更容易查看。 - Tim B James

Answer 1

这是一个很好的教程，可以帮助理解如何为任何div元素创建圆角边框：

http://www.css3.info/preview/rounded-border/

或者您可以按照以下方式使某个div元素的边框变成圆角：

#div1 {
-moz-border-radius: 15px; //for mozilla support
-webkit-border-radius: 15px; //for chrome support
border-radius: 15px;
}

简而言之：

您可以按照自己的喜好组合这些样式。 -webkit-… 只会被 WebKit 浏览器（Chrome、Safari）识别，-moz-… 只会被基于 Mozilla 的浏览器（Firefox）识别。

编辑：

您只能将 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; }

希望这可以帮助到你。

- talha2k

---

我使用了那个，但是什么也没改变。：\ - Duncan Palmer

HTML？您能附上您的结果截图吗？ - talha2k

HTML：http://screensnapr.com/v/bnYlV2.png 结果：http://screensnapr.com/v/DfXX5I.png - Duncan Palmer

不需要截图，只需在 CSS 中添加 -webkit-border-radius:15px; 即可。它会起作用的。 - talha2k

当然可以，使用-webkit-border-top-left-radius设置左上角圆角，使用-webkit-border-top-right-radius设置右上角圆角。 - talha2k

Answer 2

像这样，加上您自己的定制：

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

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

JSFiddle Example

- Paul

Answer 3

这里有一些示例以及浏览器支持信息。

border---radius: [ | <%> ] [ | <%> ]?

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
height: 150px;
Width:150px;
} 

真实世界的例子：在大多数浏览器中，除了IE < 7之外，这应该显示一个带有圆角的灰色框。

HTML

<div id="RoundCorners">

</div>

CSS

#RoundCorners
{
   border-radius: 15px;
   moz-border-radius: 15px; //If using Firefox
   background-color: #333;
}

目前，Opera（10.5版本及以上）、Safari（5版本及以上）和Chrome（5版本及以上）都支持当前W3C规范中原生定义的单独的border-*-radius属性和border-radius简写属性（尽管仍存在一些未解决的问题，例如边框样式转换、使用百分比长度等）。

自Mozilla Firefox（1.0版本及以上）起，支持带有-moz-前缀的border-radius，尽管Mozilla实现与当前W3C规范之间存在一些差异（见下文）。

更新：最近的Firefox夜间版本支持无需-moz-前缀的border-radius。

Safari和Chrome（以及其他基于Webkit的浏览器）自版本3起就支持带有-webkit-前缀的border-radius（从版本5开始不再需要），尽管与当前规范存在一些差异（请参阅本文以了解Webkit旧版本如何处理border-radius的更多详细信息）。

即使是微软也承诺，并在其最近的预览版中演示了对Internet Explorer 9及以上版本的border-radius支持（无需前缀）。

- Rhys

---

我使用了那个，但它没有将角落圆滑。 - Duncan Palmer

@Duncan Palmer 你用的是哪个浏览器进行测试？另外，你想发布你的CSS吗？ - Rhys

谷歌浏览器，我正在使用它：#test{ background: #000000; border-radius: 15px; -moz-border-radius: 15px; } - Duncan Palmer

@Duncan Palmer 我已经添加了另一个包括基本HTML的示例。希望这可以帮助你。这是测试，绝对有效。你的示例没有任何H或W。 - Rhys

Answer 4

你可以使用CSS属性border-radius。

然而，它不支持旧版本的浏览器。

- Sylvain Cleymans

Answer 5

创建一个矩形剪辑，并在其上放置一种具有粗圆边框的矩形。

- Vitali Pom