Html 使用自定义背景色删除字体图标的边框

我使用自定义的字体背景色，但它也会像这样显示图标周围的边框

我还听说了

边界半径：50%

，但它不能完全删除边界我如何删除这些边界

这是html代码

正文{
背景颜色：淡紫色；
}
.社交：悬停{
不透明度：1；
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
-o变换：比例（1.1）；
}
.社会{
不透明度：0.9；
背景：#fff；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
-o变换：标度（0.8）；
-webkit转换持续时间：0.5s；
-moz转换持续时间：0.5s；
-o-过渡持续时间：0.5s；
}
.社会福利{
颜色：#3B5998；
} 
.社会全科医生{
颜色：#d34836；
}
社会福利署{
颜色：#4099FF；
}
.社会ig{
颜色：#cd486b；
}

---

没有边框，只有白色背景。 只需删除背景样式或使其透明即可

.social {
    opacity:0.9;
    background: transparent;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

如果你想为图标添加白色背景，你可以在白色背景和边框后添加一个元素，使其与图标匹配

正文{
背景颜色：淡紫色；
}
.社交：悬停{
不透明度：1；
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
-o变换：比例（1.1）；
}
.社会{
位置：相对位置；
边界半径：3px；
不透明度：0.9；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
-o变换：标度（0.8）；
-webkit转换持续时间：0.5s；
-moz转换持续时间：0.5s；
-o-过渡持续时间：0.5s；
}
.社交：之后{
内容：“；
位置：绝对位置；
顶部：4px；
边界半径：12px；
左：0；
宽度：100%；
身高：86%；
背景：白色；
z指数：-1；
}
.社会福利{
颜色：#3B5998；
} 
.社会全科医生{
颜色：#d34836；
}
社会福利署{
颜色：#4099FF；
}
.社会ig{
颜色：#cd486b；
}

---

从

.social

中删除白色背景，并添加

：before

正文{
背景颜色：淡紫色；
}
a{
位置：相对位置；
显示：内联块；
垂直对齐：中间对齐；
}
a:以前{
内容：“；
背景：#fff；
宽度：32px；
高度：32px；
位置：绝对位置；
顶部：8px；
左：4px；
显示：块；
边界半径：9px；
不透明度：0.9；
}
a:悬停：在之前{
不透明度：1；
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
-o变换：比例（1.1）；
}
.社交：悬停{
不透明度：1；
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
-o变换：比例（1.1）；
}
.社会{
不透明度：0.9；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
-o变换：标度（0.8）；
-webkit转换持续时间：0.5s；
-moz转换持续时间：0.5s；
-o-过渡持续时间：0.5s；
}
.社会福利{
颜色：#3B5998；
} 
.社会全科医生{
颜色：#d34836；
}
社会福利署{
颜色：#4099FF；
}
.社会ig{
颜色：#cd486b；
}

---

你在那里看到的是

背景

在流血-因此试图用标准边界规则解决这个问题不会产生预期的结果

考虑减少图标的

行高度

，如下面嵌入的代码片段所示

代码片段演示：

正文{
背景颜色：灰色；
}
.社交：悬停{
不透明度：1；
-webkit转换：比例（1.1）；
-moz变换：比例（1.1）；
-o变换：比例（1.1）；
}
.fa.social{/*您的选择器中需要更多的特殊性来超过默认图标行高度*/
不透明度：0.9；
背景：#fff；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
-o变换：标度（0.8）；
-webkit转换持续时间：0.5s；
-moz转换持续时间：0.5s；
-o-过渡持续时间：0.5s；
/*附加的*/
线高：39px；
边界半径：10px；
}
.社会福利{
颜色：#3B5998；
} 
.社会全科医生{
颜色：#d34836；
}
社会福利署{
颜色：#4099FF；
}
.社会ig{
颜色：#cd486b；
}

这样做也会删除背景色，但我想要背景色如果你想要白色背景，那么你必须调整大小。social，它适合图标并提供边框半径，因此它适合图标半径，可能边框半径：3px；我编辑了我的答案，但下一篇文章有一个更简单的解决方案。