Question

我已经知道如何在HTML中为对象创建圆角边框。但是，我如何只绕一个或两个角？

Answer 1

简单你可以这样做：

#example1 {
border-radius: 15px;
}

或

#example2 {
-moz-border-radius: 15px;
border-radius: 15px;
}

可以使用四个单独的边框 - * - 半径属性（border-bottom-left-radius，border-top-left-radius等）或使用border-radius同时为所有四个角创建圆角速记财产。

Sintax

border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ]?

示例：

border-top-left-radius: 10px 5px; border-bottom-right-radius: 10% 5%; border-top-right-radius: 10px;

Answer 2

您可以在每个角落（或您需要的地方）应用不同的border-radius。例如：

div{
    background-color: blue;
    border-top-left-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 20px;
}

DEMO

Answer 3

你可以像这样使用border-radius属性：

border-radius: 22px 30px 10px 10px; /*top-left,top-right,bottom-right,bottom-left*/
-moz-border-radius: 22px 30px 10px 10px;/*top-left,top-right,bottom-right,bottom-left*/
-webkit-border-radius: 22px 30px 10px 10px;/*top-left,top-right,bottom-right,bottom-left*/

Answer 4

border-radius属性可以用4个值写入。从左上方开始顺时针方向移动。

.some-class {
  border-radius: 1px 2px 3px 4px;
}

Answer 5

#rounded {
    border-radius: 15px 50px 30px 5px;

第一个数字（本例中为15px）是左上角第二个数字（本例中为50px）是右上角第三个数字（本例中为30px）是右下角第四个数字（本例中为5px）是左下角

数字越大，圆形越多，数字越小，越接近正方形。只需更改#rounded以匹配代码的CSS标记。

如何在HTML中创建边框的一部分？

5 个答案: