css - 每个单独的小部件周围的 wordpress 圆 Angular 框

Question

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

http://wpcreations.net/wptest/

我现在有一个盒子。我需要将其四舍五入，并且必须跨浏览器兼容。提前谢谢你。

我

Answer 1

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

在您的主题样式表中，添加:

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

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

要使 IE6-8 具有圆 Angular ，您可以使用“Curved Corners”。它不会必须验证，但它会得到您想要的外观。

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

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

//编辑

使用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); 
}

希望对您有所帮助。