css——扁平圆弧（底部弧度）

最新推荐文章于 2024-02-27 11:40:35 发布

耶啵奶膘

最新推荐文章于 2024-02-27 11:40:35 发布

阅读量1.5k

点赞数 1

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/xulihua_75/article/details/128624742

版权

CSS 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

案例演示

在这里插入图片描述

使用伪类处理，先将元素自身定位为relative，伪类设置content:‘’，并相对定位为absolute，再设置下left ,top 值，然后通过改变width和和left就可以调节弧度。宽度需大于100%，将left设为（100%-宽度）/ 2，然后宽度越接近100%，弧度越大，相当方便。

在这里插入图片描述
一般第一个用的比较多

<view class="popupBox"></view>

.popupBox {
	width: 100%;
	height: 400rpx;
	position: relative;
}

.popupBox:after {
	width: 180%;
	height: 100%;
	position: absolute;
	left: -40%;
	top: 0;
	z-index: -1;
	content: '';
	border-radius: 50% 50% 0 0; //顶部圆弧，底部圆弧： 0 0 50% 50%
	background-color: #ffffff;
}