极客观点
项目管理
HarmonyOS
各位大佬，遇到了一个让我困惑的问题。同一张背景图，加了border-radius的，会导致出现一条线，而这个线是背景图片的中间蓝色部分的顶部
为什么会出现这种问题？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
background: #000;
}
.box{
width: 124px;
height: 48px;
background-size: cover;
background: url('./bg.png') no-repeat;
}
.radius{
border-radius: 1px;
}
.box.top{
background-position:center top;
}
.box.center{
background-position:center center;
}
.box.bottom{
background-position:center bottom;
}
</style>
</head>
<body>
<div class="box top"></div>
<div class="box top radius"></div>
</body>
</html>出现的问题：第二个div带了radius的样式，底部会有一条线 ，浏览器放大200倍要看的更清楚一点。这个线是背景图中间部分的内容，因为有颜色，所以看起来是一条边线。
下面是背景图：bg.png （因为面板是白色，所以看起来上下都是白色的，只有中间是蓝色，但是实际上上下都是带透明度的）
在CSS中，用于设置背景图像的background中属性主要包括以下几个：
background-color：设置元素的背景颜色。
background-image：设置元素的背景图像，可以是一个图像的URL或者渐变（gradient）。
background-repeat：指定背景图像的重复方式，如 repeat, repeat-x, repeat-y, no-repeat 等。
background-attachment：指定背景图像是否随着页面的其余部分滚动，或者固定在视口中。
background-position：设置背景图像的起始位置，可以使用关键字（如 top, center, bottom）或者具体的像素或百分比值。
background-size：指定背景图像的尺寸，可以设置为 cover（覆盖整个容器）、contain（保持宽高比并适应容器）、具体的像素值或百分比。
background-clip：定义背景图像的绘制区域，可以是 border-box（默认，整个边框区域）、padding-box（内边距区域）或 content-box（内容区域）。
background-origin：指定背景图像的起始位置，类似于 background-clip，但可以设置背景图像的起始位置。
重点
background-clip属性默认的值是 border-box（整个边框区域），设置了border-radius: 1px；后，元素边框区域变为圆角，无任何遮挡，这时就会显示出背景图的底色来，将background-clip的值，改为非默认值，就会略过边框，正常显示。我的理解是这样子的