CSS 像素艺术的框阴影或普通图像文件？
CSS box-shadow or normal image file for a pixel art?
所以我想在我的网络应用程序中使用一些像素艺术。我正在为我的像素艺术使用普通图像文件 (.png)，并通过 <img> 标签或通过 background-image 属性.
导入它
但后来我发现了这个 site，它允许我绘制像素图，然后使用 box-shadow 属性 将其转换为 css。这让我想知道哪一个会为我的应用程序带来更好的性能，原始方式还是 box-shadow 方式？
你能告诉我每种方式的优缺点吗？谢谢！
一般来说，是的，如果您想提高速度和性能，避免服务器 round-trips 获取额外的文件是个好主意。
如果您正在下载
- 一个CSS文件
- 一个PNG
并且您可以选择 仅 CSS 文件，那么这是一个值得考虑的好选择。
您可以使用以下技术将实用图形硬编码到 CSS 文件中：
- 使用 Base 64 编码 对
.png 进行编码，并声明 background-image 引用描述 .png 的数据 URI
- 改用
.svg 并声明 background-image 引用描述 .svg 的数据 URI（这次不需要 base-64 编码，因为 SVG 已经 text-based)
- 使用问题中提到的
box-shadow 技巧
可能还有更多技术可以将实用程序图形硬编码到您的 CSS 文件中。
进一步阅读：
所以我想在我的网络应用程序中使用一些像素艺术。我正在为我的像素艺术使用普通图像文件 (.png)，并通过 <img> 标签或通过 background-image 属性.
但后来我发现了这个 site，它允许我绘制像素图，然后使用 box-shadow 属性 将其转换为 css。这让我想知道哪一个会为我的应用程序带来更好的性能，原始方式还是 box-shadow 方式？
你能告诉我每种方式的优缺点吗？谢谢！
一般来说，是的，如果您想提高速度和性能，避免服务器 round-trips 获取额外的文件是个好主意。
如果您正在下载
- 一个CSS文件
- 一个PNG
并且您可以选择 仅 CSS 文件，那么这是一个值得考虑的好选择。
您可以使用以下技术将实用图形硬编码到 CSS 文件中：
- 使用 Base 64 编码 对
.png进行编码，并声明background-image引用描述.png 的数据 URI
- 改用
.svg并声明background-image引用描述.svg的数据 URI（这次不需要 base-64 编码，因为 SVG 已经 text-based) - 使用问题中提到的
box-shadow技巧
可能还有更多技术可以将实用程序图形硬编码到您的 CSS 文件中。
进一步阅读：