图像上的边框半径不起作用（Android）

Question

我正在尝试获取带有圆角的图像，以便可以将其变成圆形图像。我正在使用vue-nativescript。

html：

<template>
    <Page>
        <FlexboxLayout flexDirection="column" justifyContent="space-around">
        <StackLayout class="stack-layout-logo">
            <Image
                src="~/assets/images/passer.png"
                stretch="aspectFit"
                class="image-logo"
            ></Image>
        </StackLayout>
        <StackLayout class="stack-layout-logo">
            <Image
                src="~/assets/images/passer.png"
                stretch="aspectFill"
                class="image-logo"
            ></Image>
        </StackLayout>
        <StackLayout class="stack-layout-logo">
            <Image src="~/assets/images/passer.png" stretch="none" class="image-logo"></Image>
        </StackLayout>
        </FlexboxLayout>
    </Page>
</template>

css：

.stack-layout-logo {
    background-color: lime;
    height: 25%;
}

.image-logo {
    background-color: grey;
    border-radius: 50% 50% 50% 50%;
    height: 100%;
}

我尝试了不同的伸展运动，但似乎都没有做我想要的事情。

Answer 1

根据doc，您应该这样使用：

.image-logo {
    background-color: grey;
    border-radius: 20;
    height: 100%;
}