为CSS中的上半部分创建圆角

Question

我想只为上半部分的按钮做圆角.

我知道如何使用border-radius和制作所有边的圆角-webkit-border-radius.

但只喜欢上半场角落.

我需要一些关于如何在CSS中执行此操作的指导.

Answer 1

您可以使用以下样式规则:

border-top-left-radius
border-top-right-radius

注意:border-radius规则无效-webkit-.

Answer 2

当我想要围绕特定角落时,我使用下面的代码

border-radius: 10px     10px      0           0;
            // top-left top-right bottom-right bottom-left. 

Answer 3

这是我喜欢使用的模式:

CSS

.round-corners-5px{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.round-corners-10px{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.unround-top-corners{
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.unround-bottom-corners{
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

HTML

<button class="round-corners-5px unround-bottom-corners" style="background-color: white;"></button>

Answer 4

如果你只想圆某些角，这是它的代码：

border-radius:5px 5px 5px 5px;

第一个值用于左上角，第二个用于右上角，第三个用于左下角，第四个用于右下角。

Answer 5

border-radius css标签有特定的变体:

border-top-left-radius:2em; 
border-top-right-radius:2em;