这个问题最开始出现在小程序上，然后在社区找到一个一样得案例
案例：https://developers.weixin.qq.com/community/develop/doc/000608420706f0d8f65f4e8c95b800
一开始以为是小程序的BUG，后来认真看文字才发现在IOS 的Safari浏览器里就已经存在，ios的BUG了... ，并且复现的概率还挺高。百度，询问无果...
卡了好几天找不到解决方案，真的去TM的ios，以前是IE 现在是IOS，都2023年...
大致原因是：
在 Safari 浏览器中，当同时使用 background 和 border-radius 属性时，可能会出现重复进入浏览器元素的黑线问题。这个问题通常被称为 “background bleed”（背景渗透）。
背景渗透问题是由于 border-radius 属性的圆角和 background 属性的背景颜色之间的计算误差导致的。当 border-radius 的值较大时，浏览器可能会在元素的边缘上绘制额外的像素，导致背景颜色透过圆角边缘渗透出来，形成黑线。
- 使用
background-clip属性：将background-clip设置为padding-box，可以确保背景颜色仅在元素的内边距区域内显示，而不会渗透到边缘。例如：
.element {
background: red;
border-radius: 10px;
background-clip: padding-box;
}
- 使用伪元素：使用
::before或::after伪元素来为元素添加背景色，并将其覆盖在元素上。这样可以避免背景渗透问题。例如：
.element {
position: relative;
border-radius: 10px;
}
.element::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
z-index: -1;
}
这样，使用伪元素的背景色将覆盖在元素上，避免了背景渗透问题。
除此之外，我几乎在网上找不到任何相关问题的答案和资料，所以写了这一篇博客，希望遇到的人留下你们的解决办法。