WordPress 在每个单独的小部件周围设置圆角框

Question

我正在创建一个主题，需要知道如何在每个单独的小部件周围制作一个圆形框。我想改变每种颜色。我也需要它圆润且充满活力。我需要如果我添加更多东西它会拉伸或自动调整高度。我尝试了一遍又一遍，但找不到好的方法。这是我的测试板

http://wpcreations.net/wptest/

我现在有一个盒子。我需要对其进行四舍五入，并且必须跨浏览器兼容。先感谢您。

我

Answer 1

您可以通过 border-radius 完成每个小部件上的圆角。

在主题的样式表中，添加：

.widget { 
   border-radius:10px; 
   -moz-border-radius:10px; 
   -webkit-border-radius:10px; 
}

对于不同的背景颜色，您必须单独定位每个小部件并在样式表中为它们指定颜色。

要使 IE6-8 表现出圆角，您可以使用“弯曲的角”。它不一定会验证，但会得到您想要的外观。

IE9 已经支持 border-radius，但您必须正确指定元标记：

<meta http-equiv="X-UA-Compatible" content="IE=9" />

//编辑

要使用 曲线角，首先下载此处为最新版本。
然后您所要做的就是将 border-radius.htc 文件上传到您可以访问的服务器；一般在主题的 css 文件夹中。
之后，无论您想要在何处设置边框半径，都可以将 behavior: url(border-radius.htc) 添加到 css 中。

我们的示例添加了 Curved Corners 的 border-radius.htc：

.widget { 
   border-radius:10px; 
   -moz-border-radius:10px; 
   -webkit-border-radius:10px;
   behavior: url(http://path.to.file/border-radius.htc); 
}

希望有所帮助。

Answer 2

如果您愿意在 IE6/7/8 中不要圆角，那么仅 CSS 就可以实现此目的：

.rounded_corners {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

请注意，-moz- 和 -webkit- 属性是支持旧版 Mozilla 和 Webkit 浏览器。最新的浏览器（包括 IE9）原样支持 border-radius。