css - CSS 样式：表格边缘的曲率（仅限顶部）

Question

我试图使表格的左上角和右上角为圆形，但应用以下代码也会使左下角和右下角为圆形。知道如何解决吗？

/* sets the curvature of the box */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;

Answer 1

仅指定左上角和右上角：

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

border-radius.com是一个有用的快速工具，可以通过这种方式创建边界半径。

Answer 2

习惯了这个

border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;

Answer 3

您可以使用此属性指定边框的每个角。它是这样的：

border-radius: [top-left] [top-right] [bottom-left] [bottom-right]

border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-o-border-radius: 10px 10px 0px 0px;

Answer 4

使用以下代码，它将起作用

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;