最近，我开始制作CSS美术，并且注意到一些我对CSS边框不了解的东西。
如果我将元素设置为具有透明背景的圆角，并且仅在一侧设置边框，则在所有其他侧上仍然存在一条淡淡的线，仅在mobile上显示。
<div></div>
div {
width: 300px;
height: 150px;
background: transparent;
border-top: 5px solid purple;
border-radius: 50%;
}
比较PC和手机上的以下CodePen，了解我的意思：
https://codepen.io/aradevich/pen/mdrLvqx
屏幕截图：椭圆形，顶部边框为5px
当它歪斜CSS艺术中的面部特征时（例如在移动设备上用眼睛）时，此效果尤其令人不安：https : //codepen.io/aradevich/pen/qBaxQye?editors=1100
有谁知道为什么会这样，我该如何解决？谢谢！
这是一个不产生边界问题而具有相同结果的不同想法：
div.box {
width: 300px;
height: 150px;
background:
/* 150 = width/2 70 = height/2 - 5px of border */
radial-gradient(151px 70px at bottom, transparent 98%,purple)
top/100% 50% no-repeat;
border-radius: 50% 50% 0 0;
}<div class="box"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句