问题描述
所以我想在Web应用程序中使用一些像素艺术。我使用的是普通的图像文件（.png）用于像素图，并通过<img>标签或background-image属性将其导入。
但是后来我发现了这个site，它允许我绘制像素图，然后使用Box-shadow属性将其转换为CSS。这使我想知道哪种方式能以原始方式还是Box-shadow为我的应用带来更好的性能？
您能给我每种方法的优点和缺点吗？谢谢！
解决方法
通常，是的，如果要提高速度和性能，最好避免服务器往返以获取其他文件。
如果要下载
- 一个 CSS文件
- 一个 PNG
，并且您可以选择仅 下载 CSS文件，那么这是一个不错的选择。
您可以使用以下技术将实用程序图形硬编码到CSS文件中：
- 使用 Base 64编码对
.png进行编码，并声明background-image引用描述.png的数据URI。
- 改为使用
.svg并声明background-image引用描述.svg的数据URI（这次无需进行base-64编码，因为SVG已经基于文本了） li>
- 使用问题中引用的
box-shadow技术
可能还有其他方法可以将实用程序图形硬编码到CSS文件中。
进一步阅读：