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

Question

我正在考虑添加一个边框顶部，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

I suggest you to use border instead of border-top to make sure the property is applied to all borders.

border: 20px solid red;

In this case you can use border-bottom-left-radius: 12px; with one value because both are the same.

Also you can add vendor property for webkit:

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

Here is a fiddle.

Answer 2

我不确定为什么你不能产生结果，但上面的代码看起来是正确的。我提供了一个 JS Fiddle 示例，我的作品。我假设您将border-top 属性添加到框中。我认为每个边界属性不需要两个值。希望这可以帮助。

创建一个 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; 
}