我想给给予我的css放大的图标sprite一个小的白色空间,然后是一个1 px的细轮廓,像这样:
x1c 0d1x的数据
现在我已经尝试了这些演示,使用同样优雅的html和不同的CSS(在社区中其他有才华的巨人的帮助下):
JS Fiddle Demo1
JS Fiddle Demo2的
{
border: 1px solid white;
outline: 1px solid red;
}
字符串
然而,在这两种方法中,正如你所看到的,边框(在这里充当间隔符)和轮廓都比我想要的1 px大得多。这里的挑战是,我使用了一个巨大的背景和坐标作为精灵,所以会有background-position: 0 -3048;
。
如果我试图在图标的父div中设置边框/轮廓,那么整个布局福尔斯就会分崩离析!
如果我尝试background-size: contain
,那么整个精灵背景就会被压缩成一个很小的图标大小。
我如何才能实现如上图所示的1 px薄轮廓?
3条答案
按热度按时间z0qdvdin1#
background-size
是最好的选择,flex
* 在这里也很有用 *。您只需更新
background-position
个字符
y53ybaqx2#
这是因为你有一个
transform: scale
在同一个元素上,你正在应用你的边框。边框在变换之前应用,因此边框也会缩放。
解决方案是将边框放在图标的父元素上,并对子元素应用缩放。
niwlg2el3#
只要你使用缩放元素,你就永远不会得到一条1px的线:
字符串