如何制作带圆角的div

【问题标题】：How to make a div with rounded corners如何制作带圆角的div
【发布时间】：2011-10-29 17:39:15
【问题描述】：

如何制作一个 div 使其边框角变圆？

【问题讨论】：

【解决方案1】：

这里是：

<style type="text/css">
div.test
{
    width: 115px;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 15px;
    -moz-border-radius: 15px;
}
</style>
<div class="test">This is some text!</div>

【讨论】：

最好记得使用前缀，例如“moz”（用于 Mozilla）和“webkit”（用于 Safari 和 Chrome）。也许还有更多我不知道的。跨度>

【解决方案2】：

使用 CSS 添加代码：border-radius: 10px。

例如，我使用 10 像素，但您可以尝试任意数量的像素。

【讨论】：

【解决方案3】：

添加这个css：

border-top-right-radius:15px;
border-top-left-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;

【讨论】：

【解决方案4】：

使用border-radius 属性。指定的数量越高（通常在px 中），您的形状就越圆润。示例：

myDiv { border-radius:30px;}

希望对您有所帮助。

【讨论】：

【解决方案5】：

如果你不想依赖像素，你总是可以使用 %

border-radius: 50%;

【讨论】：