我试着用css组合了一个简单的场景来实现卡片样式布局。

它在22英寸显示器上看起来还可以，但在我的三星电视1920x1080分辨率上看就不好看了。

看起来边框中有一个白色的空隙，这是由抗锯齿引起的。

HTML

<main>
  <div class="card-holder">
    <div class="card-header">
      <div class="card-icon">
        <span class="icon icon-bell"></span>
      </div>
      <span class="card-title">Title</span>
    </div>

    <div class="card-about">
      <span>Some about text.</span>
    </div>

  </div>
</main>

CSS

.card-holder {
  border-radius: 1em 1em 0px 0px;
  border: 3px solid rgb(0, 0, 0);
  border-spacing: 0;

  overflow: hidden;
  width: 300px;
}

.card-header {
  display: flex;
  align-items: center;

  padding: 5px;

  background-color: rgb(0, 64, 255);
  color: #fff;

  overflow: hidden;
}

.card-title {
  display: inline-block;
  flex-grow: 1;
  text-align: center;
}

.card-about {
  display: block;
}

.card-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;
  background-color: white;
  overflow: hidden;

  height: 64px;
  width: 64px;
}

.icon {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  height: 48px;
  width: 48px;
  vertical-align: middle;
}

.icon-bell {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
}

当我将浏览器缩放到80%时，卡的右手边会出现一条白线。

是否有一种推荐的方法来使这种场景在不同的缩放级别和监视器分辨率下都能很好地工作？

我一直在扯头发。