css - 如何将 webkit-mask-box-image 与 Retina 质量的图像一起使用？

Question

是否可以使用 实现 Retina 质量的 CSS 遮罩-webkit-mask-box-image？在这种特殊情况下，我试图绕过元素的角落（border-radius性能不够）：

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

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

面罩定位正确，但圆角不是 Retina 平滑的。

Answer 1

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

• 接受它并处理边界半径，因为你不能在现代机器上得到那么大的滞后。此外，只有 Safari 和 Chrome（以及基于 webkit 的小型浏览器，如 RockMelt、Yandex 等）使用-webkit-mask.，所以除非您正在制作 Chrome 应用程序，否则您将失去很多浏览器的受众（目前约为 54.25%）不兼容，更不用说它要求用户下载图像只是为了看到圆角。
• Webkit 在其缩放算法中使用图像平滑，因此只需提供一个巨大的蒙版图像并让它在加载时进行一次性缩放。这具有固有的缺点，即下载时间更长，并且需要一段时间才能扩展，但是，在缓存清除之前，这是一次性的事情。
• 不要使用 PNG，而是使用 SVG。S ‍calable V ‍ector G ‍raphics的全部意义在于它们具有无限的可扩展性，并且在任何分辨率或尺寸下都不会损失质量。有关如何制作 SVG 文件的更多信息，请参阅http://www.w3.org/Graphics/SVG/