第一种：::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>

css-两种画弧线方法

第二种：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>

css-两种画弧线方法

 border-radius:* * /*

 border-radius:50% 50%/50%;
 height: 200px;
 width: 200px;

 css-两种画弧线方法

    border-radius:0 0 50% 50%/50%;
    height: 200px;
    width: 200px;

 css-两种画弧线方法

     border-radius:0 0 50% 50%/10%;
    height: 200px;
    width: 200px;

 css-两种画弧线方法

     border-radius:0 0 50% 50%/90%;
    height: 200px;
    width: 200px;

css-两种画弧线方法 

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。