第一种:::after
<template>
<view>
<view class="bg">
</view>
</view>
</template>
<style>
.bg{
background-color: pink;
}
.bg::after{
content: '';
position: absolute;
width: 160%;
height: 100px;
background: skyblue;
left: -30%;
border-radius: 0 0 50% 50%;
}
</style>
第二种:border-radius
<template>
<view>
<view class="bg">
</view>
</view>
</template>
<style>
.bg{
background-color: pink;
border-radius:0 0 50% 50%/40%;
height: 100px;
width: 160%;
margin-left: -30%;
}
</style>
border-radius:* * /*
border-radius:50% 50%/50%;
height: 200px;
width: 200px;
border-radius:0 0 50% 50%/50%;
height: 200px;
width: 200px;
border-radius:0 0 50% 50%/10%;
height: 200px;
width: 200px;
border-radius:0 0 50% 50%/90%;
height: 200px;
width: 200px;
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)