小程序样式半弧中间整圆

最新推荐文章于 2024-02-04 16:03:05 发布

mfylove

最新推荐文章于 2024-02-04 16:03:05 发布

阅读量269

点赞数

分类专栏： VUE 小程序文章标签： css vue.js html

本文链接：https://blog.csdn.net/mfylove/article/details/111325287

版权

VUE 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

小程序

2 篇文章 0 订阅

订阅专栏

附上样式及代码

<template>
	<view class="page">
		<view class="page-content">
			<view class="page_top"></view>
			<view class="page_top_user"></view>
			<view class="page_top_image_outer"></view>
			<view class="page_top_image"></view>
		</view>
	</view>
</template>

<style>
	.page_top{
		width: 100%;
		height: 400upx;
		background-color: #007aff;
		Z-index:1;
	}
	.page_top_user:after {
		background-color: #ffffff;
		content: '';
		position: absolute;
		width: 160%;
		height: 450rpx;
		left: -30%;
		top:200upx;
		z-index: 2;
		border-radius: 50% 50% 0 0;
	}
	.page_top_image_outer{
		position: absolute;
		background-color: #ffffff;
		Z-index:3;
		border-radius: 50%;
		width:200upx;
		height:200upx;
		left:50%;
		top:200upx;
		margin-left:-100upx;
		margin-top:-100upx;
	}
	.page_top_image{
		position: absolute;
		background-color: #007aff;
		Z-index:4;
		border-radius: 50%;
		width:194upx;
		height:194upx;
		left:50%;
		top:200upx;
		margin-left:-97upx;
		margin-top:-97upx;
	}
</style>