如何使我的"i"周围的圆形完美圆形？

Question

我正在尝试使用CSS创建一个小信息图形,所以我有

.info_icon {
  font-style: italic !important;
  color: #008EE2;
  padding: 5px 10px;
  display: inline-block;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  -moz-box-shadow: 0px 0px 2px #fff;
  -webkit-box-shadow: 0px 0px 2px #fff;
  box-shadow: 0px 0px 2px #fff;
  background-color: #ffffff;
}

<i class="info_icon">i</i>

也许它只是我的屏幕(我在MacBook Pro上),但是"i"周围的小圆圈在左侧和右侧看起来有些截止.我在这里有一个例子 - https://jsfiddle.net/w6e94dyp/.有谁知道如何解决这个问题(使"i"周围的圆形完美圆形)？

Answer 1

尝试使用border-radius: 50%这样来修复裁剪:

.info_icon {
  font-style: italic !important;
  color: #008EE2;
  padding: 5px 10px;
  display: inline-block;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: 0px 0px 2px #fff;
  -webkit-box-shadow: 0px 0px 2px #fff;
  box-shadow: 0px 0px 2px #fff;
  background-color: #ffffff;
  border: 1px solid #008EE2;
}

<i class="info_icon">i</i>

但是如果你需要一个完美的圆圈,你需要设置相同的width,height并为所有四个边提供类似的填充,如下所示:

.info_icon {
  font-style: italic !important;
  color: #008EE2;
  padding: 7px;
  display: inline-block;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-box-shadow: 0px 0px 2px #fff;
  -webkit-box-shadow: 0px 0px 2px #fff;
  box-shadow: 0px 0px 2px #fff;
  background-color: #ffffff;
  border: 1px solid #008EE2;
  height: 10px;
  width: 10px;
  line-height: 10px;
  text-align: center;
}

<i class="info_icon">i</i>