HTML / CSS圆角矩形？

Question

是否可以在不使用图像的情况下创建带圆边的矩形？例如：

谢谢。

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

希望这有帮助。

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

Answer 3

您可以使用css属性border-radius。

但旧浏览器不支持此功能。

Answer 4

以下是一些示例以及浏览器支持信息。

border- - -radius：[| ＆LT;％＆GT; ] [| ＆LT;％＆GT; ]？

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

真实世界示例：除了IE＆lt;之外，这应该在大多数浏览器中显示带有圆角的灰色框。 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以后）都支持单独的边框 - * - radius属性和border-radius速记属性，如当前W3C规范中本机定义的那样（尽管在边界样式转换，使用长度百分比等问题上仍然存在突出的错误。）

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

更新：最近的Firefox nightly版本支持border-radius而没有-moz-前缀。

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

即便是微软也承诺并在最近的预览版中证明了从Internet Explorer 9开始支持border-radius（没有前缀）。

Answer 5

制作一个矩形剪辑，并在其上放置一个带有粗圆边框的矩形。