css-两种画弧线方法_css如何画有弧度的线

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