css - 圆角仅在 css 中的某些角上

Question

是否可以使用 css 创建一个圆角，我只在某个特定角而不是所有角上进行舍入？目前我正在使用：

  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;

但我看不到任何指定左上角或其他角落的方法。我希望其他角落保持正方形。

Answer 1

你可以这样做

border-radius: 5px 10px 15px 20px; /* This is a short hand syntax */

上面的语法就像扇子一样，从 开始到5px结束20px，只是在下面添加了一个图表，其中的箭头描绘了速记语法流程的开始。

演示

要指定特定的半径，您可以使用类似的属性

border-top-left-radius: 10px;

这相当于

border-radius: 10px 0 0 0;

Answer 2

.rounded-corners {
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;\
    border-radius: 20px;
}

可以这样修改，

    -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;
    -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;

Answer 3

你可以使用：DEMO

• 边框半径左上角
• 边框半径右上角
• 边框半径左下角

• 边框半径右下角

  border-radius: 5px 0 10px 0;
  

  

欲了解更多信息，请访问本网站。

Answer 4

尝试使用这个： -

border-radius: <specific_value>px <specific_value>px <specific_value>px <specific_value>px 

这 4 个值以顺时针方式表示不同的角。

Answer 5

通过指定特定的角来创建圆形边框非常简单：-

如果您想创建圆角的左上角和直的所有其他角，请使用此代码而不是“border-radius”并以像素为单位给出您想要的值

border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;

你也可以用不同的方式做到这一点：-

边框半径：10px 0px 0px 0px ;

其中第一个用于左上角（10px），第二个用于右上角（0px），第三个用于右下角（0px），第四个用于左下角（0px）。

这样，只有左上角会变圆，所有其他角都保持不变