// EDIT

Question

我正在创建一个主题，需要知道如何在每个小部件周围创建一个圆角框。我想改变每种颜色。我需要它也圆润而且动态。我需要，如果我添加更多的东西，它将拉伸或自动调整高度。我一遍又一遍地试过但却找不到好办法。这是我的测试板

我现在有一个盒子。我需要它四舍五入，这必须是跨浏览器兼容的。提前谢谢。

我

Answer 1

如果你不愿意在IE6 / 7/8中使用圆角，那么CSS就可以实现这一点：

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

请注意，-moz-和-webkit-属性是为了支持较旧的Mozilla和Webkit浏览器。最新的浏览器，包括IE9，支持border-radius。

Answer 2

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

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

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

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

为了让IE6-8表现出圆角，你可以使用“Curved Corners”。它不会必然验证，但它会得到你想要的外观。

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

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

// EDIT

要使用Curved Corners，请先下载most updated version here。然后，您只需将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); 
}

希望有所帮助。

wordpress圆形框围绕每个小部件

2 个答案:

// EDIT