发布时间:2023-04-26 文章分类:WEB开发, 电脑百科 投稿人:赵颖 字号: 默认 | | 超大 打印

第一种:::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-两种画弧线方法