css弧线有锯齿

之前做过css弧线的小练习，但是没有出现弧线有锯齿的问题，最近小程序界面刚好有用到弧线，结果弧线却出现锯齿，代码跟之前是一样的。

找问题过程，注释掉该弧线所在div里面的其他内容，发现弧线变光滑了

解决方法：

另外写一个div，固定位置，将弧线的样式改到这个div上，注意，这个div里面不要再放子元素

比如

//原来代码
<div class="div1">
    <div class="div2"></div>
</div>
    
改为
<div class="div1"></div>
<div>
    <div class="div2"></div>
</div>

.div1{
	width: 100%;
	height: 610rpx;
	position: relative;
	z-index: -1;
	overflow: hidden;
}
	
.div1::after {
	content: '';
	width: 200%;
	height: 610rpx;
	position: absolute;
	left: -50%;
	top: 0;
	z-index: -1;
	border-radius: 0 0 50% 50%;
	background: linear-gradient(0deg, #043E87, #2566AD, #2566AD);
}