Question

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

as.factor()

.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;
}

也许只是我的屏幕（我在MacBook Pro上），但是“i”周围的小圆圈在左侧和右侧看起来有些偏差。我在这里有一个例子 - https://jsfiddle.net/w6e94dyp/。有谁知道如何解决这个问题（使“i”周围的圆圈完美圆形）？

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

元素的框必须是正方形（等于宽度和高度）。因此，请设置其width / line-height并将其水平居中，而不是填充。

＆＃13;

.info_icon {
  font-style: italic !important;
  color: #008EE2;

  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: #ccc;
  /*added the following and removed the padding*/
  text-align:center;
  width:1.5em;
  line-height:1.5em;
}

＆＃13;

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

＆＃13;

Answer 3

padding: 5px 13px;

似乎工作。您必须考虑填充从字母i的最远部分开始，因此水平方向必须远远小于垂直方向。

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

3 个答案: