Html 我如何在我的”周围画圆圈；我"；完全圆形？

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

.info\u图标{
字体风格：斜体！重要；
颜色：#008EE2；
填充物：5px10px；
显示：内联块；
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
-moz盒阴影：0px 0px 2px#fff；
-网络工具包盒阴影：0px 0px 2px#fff；
盒影：0px 0px 2px#fff；
背景色：#ffffff；
}

---

i

尝试使用

边界半径：50%

来修复裁剪：

.info\u图标{
字体风格：斜体！重要；
颜色：#008EE2；
填充物：5px10px；
显示：内联块；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
-moz盒阴影：0px 0px 2px#fff；
-网络工具包盒阴影：0px 0px 2px#fff；
盒影：0px 0px 2px#fff；
背景色：#ffffff；
边框：1px实心#008EE2；
}

---

i

尝试使用

边界半径：50%

来修复裁剪：

.info\u图标{
字体风格：斜体！重要；
颜色：#008EE2；
填充物：5px10px；
显示：内联块；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
-moz盒阴影：0px 0px 2px#fff；
-网络工具包盒阴影：0px 0px 2px#fff；
盒影：0px 0px 2px#fff；
背景色：#ffffff；
边框：1px实心#008EE2；
}

i

似乎有效。你必须考虑到填充从字母i最远的部分开始，所以水平方向的填充要比垂直方向的填充小得多

---

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

元素的框必须是正方形（宽度和高度相等）。因此，设置其

宽度

/

行高

并水平居中，而不是填充

.info\u图标{
字体风格：斜体！重要；
颜色：#008EE2；
显示：内联块；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
-moz盒阴影：0px 0px 2px#fff；
-网络工具包盒阴影：0px 0px 2px#fff；
盒影：0px 0px 2px#fff；
背景色：#ccc；
/*添加以下内容并删除填充*/
文本对齐：居中；
宽度：1.5em；
线高：1.5em；
}

---

i

元素的框必须是正方形（宽度和高度相等）。因此，设置其

宽度

/

行高

并水平居中，而不是填充

.info\u图标{
字体风格：斜体！重要；
颜色：#008EE2；
显示：内联块；
-moz边界半径：50%；
-webkit边界半径：50%；
边界半径：50%；
-moz盒阴影：0px 0px 2px#fff；
-网络工具包盒阴影：0px 0px 2px#fff；
盒影：0px 0px 2px#fff；
背景色：#ccc；
/*添加以下内容并删除填充*/
文本对齐：居中；
宽度：1.5em；
线高：1.5em；
}

---

i

我也同意这一点，如果表格不是那么突出的话会更好，会使响应更容易（如果你最终想研究的话），但这是一个更好的方法，或者我会使用的方法。这是错误的，问题不在于半径大小（在这种情况下，提供的100px远大于50%）。问题是元素不是正方形（相同的宽度/高度），因此它不是圆形而是椭圆形。@gabykag.Petrioli感谢您的评论，我更新了答案以解决您提到的问题。@Tha'erAl-Ajlouni最好使用em单位，以防字体大小属性值发生变化，在这种情况下，您不需要声明height属性和line height。@Ricky我完全同意使用em单位更好，但这只是解决与

边界半径相关的特定问题的一个示例。关于将
i
添加为HTML而不是伪元素，只是为了清晰和可读性。谢谢你的评论：）我也同意这一点，如果表格不是那么突出，会更好，会使响应更容易（如果这是你最终想要研究的东西），但这是一个更好的方法，或者我会使用的方法。这是错误的，问题不在于半径大小（在这种情况下，提供的100px远远超过50%）. 问题是元素不是正方形（相同的宽度/高度），因此它不是圆形而是椭圆形。@gabykag.Petrioli感谢您的评论，我更新了答案以解决您提到的问题。@Tha'erAl-Ajlouni最好使用em单位，以防字体大小属性值发生变化，在这种情况下，您不需要声明height属性和line height。@Ricky我完全同意使用em单位更好，但这只是解决与
边界半径相关的特定问题的一个示例。关于将
i
添加为HTML而不是伪元素，只是为了清晰和可读性。感谢您的评论：）
padding: 5px 13px;