Css 如何为放大的放大背景精灵设置1px边框和1px轮廓？

我想给我的css放大图标sprite一点空白，然后是一个1px的细轮廓，就像这样：

现在我已经尝试了这些演示，使用了同样优雅的html和不同的CSS（在社区中其他天才巨人的帮助下）：

然而，正如您所看到的，在这两种方法中，边框（在这里充当间隔符）和轮廓都比我想要的1px胖得多。这里的挑战是，我正在使用一个巨大的背景和协调作为一个精灵，因此将有

背景位置：0-3048例如

如果我试图在图标的父div中设置边框/轮廓，那么整个布局就会崩溃

如果我尝试
background size:contain
，那么整个精灵背景就会被压缩成一个很小的图标大小

如何实现上图所示的1px薄型轮廓？谢谢
 这是因为在应用边框的同一元素上有一个
变换：缩放

边界在变换之前应用，因此边界也会缩放

解决方案是将边框放在图标的父元素上，并对子元素应用缩放。
这是因为在将边框应用到的同一元素上有一个
变换：缩放

边界在变换之前应用，因此边界也会缩放

解决方案是将边框放在图标的父元素上，并将缩放应用于子元素。
只要使用缩放元素，就永远不会得到1px的线条：

-ms-transform: scale(3); 
-o-transform: scale(3); 
-webkit-transform: scale(3); 
transform: scale(3);

只要使用比例元素，就永远不会得到1px的线条：

-ms-transform: scale(3); 
-o-transform: scale(3); 
-webkit-transform: scale(3); 
transform: scale(3);

background size
是最好的选择，
flex
在这里也很有用

您只需更新
背景位置


.line{
显示器：flex；
边缘：1.2米；
对齐项目：居中；
}
跨度{
弹性：1；
边框底部：纯红1px；
保证金：0自动；
高度：25px；/*=========================ico高度的一半*/
}
.行[类]{
flex：无；
高度：50px；
宽度：50px；
边框：纯红1px；
框阴影：嵌入0.2px灰色；
背景：url(https://s3-us-west-2.amazonaws.com/appdirect-assets/Blog%20Images/Content/2011/SVG-图标（png）；
背景尺寸：1100%800%；/*11x8*/
背景位置：0px1%；
}
span：类型的最后一个{
文本对齐：右对齐；
}
.line.ico2{
背景位置：9.5%15%；
}
.line.ico3{
背景位置：20%14.85%；
}
.更大的[类]{
高度：80px；
宽度：80px；
左边距：1米；
}

左边的文字
右边的文字
左边的文字
右边的文字
左边的文字
右边的文字
背景大小自动重缩放
背景尺寸
将是最好的选择，
flex
在这里也很有用

您只需更新
背景位置


.line{
显示器：flex；
边缘：1.2米；
对齐项目：居中；
}
跨度{
弹性：1；
边框底部：纯红1px；
保证金：0自动；
高度：25px；/*=========================ico高度的一半*/
}
.行[类]{
flex：无；
高度：50px；
宽度：50px；
边框：纯红1px；
框阴影：嵌入0.2px灰色；
背景：url(https://s3-us-west-2.amazonaws.com/appdirect-assets/Blog%20Images/Content/2011/SVG-图标（png）；
背景尺寸：1100%800%；/*11x8*/
背景位置：0px1%；
}
span：类型的最后一个{
文本对齐：右对齐；
}
.line.ico2{
背景位置：9.5%15%；
}
.line.ico3{
背景位置：20%14.85%；
}
.更大的[类]{
高度：80px；
宽度：80px；
左边距：1米；
}

左边的文字
右边的文字
左边的文字
右边的文字
左边的文字
右边的文字
背景大小自动重缩放
谢谢。请看我更新的问题！我已经澄清了问题，现在实际的挑战和真正的问题更加明显。请检查这两个演示，你的建议是不要在一个图标精灵中工作：我想我省去了精灵的东西，使问题变得简单，但我不能，它使一个工作的图标和一个损坏的图标之间的区别，所以我决定让我的演示更复杂，接近现实生活的难题更准确。谢谢。请看我更新的问题！我已经澄清了问题，现在实际的挑战和真正的问题更加明显。请检查这两个演示，你的建议是不要在图标精灵中工作：我想我省去了精灵的东西，使问题变得简单，但我不能，它决定了一个正常工作的图标和一个坏掉的图标之间的区别，所以我决定通过更精确地处理现实生活中的谜题来使我的演示更复杂。投票结束这个问题的人：请确切地说明你认为这个问题有什么问题，以便可以相应地解决和改进。谢谢。投票结束此问题的人：请明确说明您认为此问题存在的问题，以便可以相应地解决和改进。谢谢，非常感谢！这个答案解决了我的布局难题：令人敬畏的新技术，我不知道，现在可以尝试学习！非常感谢！这个答案解决了我的布局难题：令人敬畏的新技术，我不知道，现在可以尝试学习！谢谢