如何样式陡峭的椭圆形按钮

Question

我正在尝试设计一个带有一些文本的标签或按钮。我知道如何给定半径并使其变为椭圆形，但是我需要一个像下面一样宽的眼睛形状的按钮或标签。

我追随了此链接https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_oval，但没有结果，例如下面带有带有圆形边框按钮的矩形形状

然后，我尝试了以下代码，但只有四角变圆了。

.boc1 {
    border-width: 1;
    border-radius: 100;
    padding: -2px;
    margin: 10% 0 0 0;
    padding: 10% 0 10% 0;
    height:100%;
    width:85%;
}

我希望你对这个问题很清楚..！

Answer 1

将边界半径更改为border-radius:50px;

Answer 2

使用clip-path

XML

<GridLayout>
    <StackLayout class="oval"></StackLayout>
    <Label class="h2" text="Some text" color="white" verticalAlignment="center"
        horizontalAlignment="center"></Label>
</GridLayout>

CSS

.oval {
    width: 85%;
    background-color: red;
    clip-path: ellipse(50% 15% at 50% 50%);
}