css - 使用 css 从锐边到圆形边框？

Question

我正在尝试创建一个带有圆 Angular 边框的 div 元素。我知道 border-radius 的使用，但我注意到使用此属性只会使拐 Angular flex ，例如右上角、左上角等。所以我想知道是否有一些属性使 div 元素的侧面 flex ，例如 border-radius 表示顶部、底部、左侧和右侧。

例如，一个顶部、底部和左侧是直的但右侧是圆形的 div。我想创建右侧，使其顶部比底部更圆。

我的目标是创建一个右侧圆 Angular 的 div 元素，不会影响顶部和底部。我的意思是右侧的曲线一旦到达顶部或底部就应该停止。 (以便顶部和底部保持笔直而不是略微 flex )。

有没有办法使用 css 获得这种效果？

Answer 1

您可以指定 horizontal and vertical border-radii通过斜杠符号来实现这样的效果...

div{
    width:100px;height:100px;
    border:3px solid #bada55;
    border-radius:10px/50%;
}

<div></div>

这将为所有边设置 50% 的垂直 border-radius 和 10px 的水平 border-radius。您可以为每个 Angular 单独定义它(因此您最多有八个值)。