如何使用带有Retina品质图像的webkit-mask-box-image？

Question

是否可以使用-webkit-mask-box-image实现Retina品质的CSS屏蔽？在这种特殊情况下，我试图围绕一个元素的角（border-radius不够高效）：

.element {
    -webkit-mask-box-image: url('mask.png') 12 12 12 12 stretch stretch;
}

掩模图像的大小是它所需的两倍（6代替12用于非视网膜屏幕）。

面具位置正确，但圆角不是Retina光滑。

Answer 1

我在这里看到三个解决方案：

• 搞砸它并处理border-radius，因为你不能让 在现代机器上停滞不前。此外，只有Safari和Chrome（以及像RockMelt这样的基于webkit的小浏览器， Yandex等等使用-webkit-mask，所以除非您正在制作Chrome应用，否则您的浏览器不兼容性会损失很多（目前约为54.25％），更不用说它需要用户下载图片只是为了看到圆角。
• Webkit在其缩放算法中使用图像平滑，因此只需提供一个巨大的蒙版图像，并让它在加载时进行一次性缩放。这有一个固有的缺点，即需要花费更长的时间才能下载，并且需要一段时间才能进行扩展，但是，在缓存清除之前，这是一次性的事情。
• 使用SVG而不是使用PNG。 S 可强制 V ector G raphics的重点在于它们具有无限可扩展性，并且不会在任何分辨率或大小下丢失质量。有关如何制作SVG文件的更多信息，请参阅http://www.w3.org/Graphics/SVG/