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

Question

是否可以使用 -webkit-mask-box-image 实现 Retina 质量的 CSS 屏蔽？在这种特殊情况下，我试图使元素的 Angular 变圆(border-radius 性能不够):

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

mask 图像是所需大小的两倍(6 用于代替非视网膜屏幕的 12)。

mask 位置正确，但圆 Angular 不是视网膜般光滑。

Answer 1

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

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