Question

我正在考虑添加一个border-top 20px solid red;，我想要将其底部四舍五入。以下它似乎对我有用。

 -moz-border-radius-bottomright: 12px 12px;
  border-bottom-right-radius: 12px 12px;
  -moz-border-radius-bottomleft: 12px 12px;
  border-bottom-left-radius: 12px 12px;

我该怎么做？

Answer 1

我不确定为什么你无法产生结果，但上面的代码看起来是正确的。我提供了一个JS小提琴的例子，我的作品。我假设你在框中添加了border-top属性。我认为每个border-property都不需要两个值。希望这可以帮助。

创建ID为box的新图层对象，并应用以下CSS。如果在框中添加段落，则不会出现边框。

http://jsfiddle.net/brownlace/kEvrE/1/embedded/result/

/* css3 rounded corners */

#box {
border-top: 20px solid red;
border-bottom-right-radius: 20px; 
border-bottom-left-radius: 20px; 
-moz-border-radius-bottomright: 20px; 
-moz-border-radius-bottomleft: 20px; 
}

Answer 2

我建议您使用border代替border-top来确保该属性适用于所有边框。

border: 20px solid red;

在这种情况下，您可以将border-bottom-left-radius: 12px;与一个值一起使用，因为它们都是相同的。

您还可以为webkit添加供应商属性：

-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;

Here是一个小提琴。

边界顶部和边界半径的CSS3问题

2 个答案: