css样式，这个凸起的圆两边弧度怎么画，我用伪类画的不自然

Question

我用伪类画的两边的弧度，感觉不自然，也有毛边，想让大家看看有什么好的方法

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

可以通过使用SVG或border-radius来实现圆角。 使用SVG实现圆角：

<svg width="100%" height="100%">
	<path d="M12,0 L88,0 Q100,0 100,12 L100,88 Q100,100 88,100 L12,100 Q0,100 0,88 L0,12 Q0,0 12,0" />
</svg>

使用border-radius实现圆角：

.border {
	border-radius: 50%;
}

关于伪类边框的模糊问题，可以设置一个大一点的border，并添加box-shadow来产生模糊效果，如：

.border:before {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	border: 20px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}