如何将Webkit-mask-box-image与视网膜质量的图像一起使用？

是否可以使用-webkit-mask-box-image实现视网膜质量的CSS遮罩？在这种特殊情况下，我想圆一个元素的角（border-radius不是高性能不够）：如何将Webkit-mask-box-image与视网膜质量的图像一起使用？

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

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

面罩放置正确，但角落圆化不是视网膜光滑。

我会说缩放位图的性能比边界半径更重要。通过实际测试证明。 – 2012-04-17 16:45:54

初始测试（只是目测它）表明'-webkit-mask-box-image'允许比border-radius更平滑的滚动。 – 2012-04-17 16:47:25

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

吸了起来，处理边界半径，因为你不会得到现代计算机上是多滞后。此外，只有Safari和Chrome（以及基于Webkit的小型浏览器，如RockMelt， Yandex等）使用-webkit-mask，所以除非您制作Chrome应用程序，否则您的观众会减少很多（目前约为54.25％）。到浏览器的不兼容性，更不用说它需要用户下载图片才能看到圆角。
Webkit在其缩放算法中使用图像平滑，因此只需提供一个巨大的蒙版图像，并让其对负载执行一次性缩放。这有一个固有的缺点，需要花费更长的时间来下载，并且需要一段时间才能缩放，但是，直到缓存清除之前，这是一次性的。
不使用PNG，而是使用SVG。小号 ‍ calable V ‍埃克特摹 ‍ raphics的整点是，他们是无限可扩展性和在任何分辨率或尺寸不失去质量。有关如何制作SVG文件的更多信息，请参阅http://www.w3.org/Graphics/SVG/

2012-11-14 13:47:46 Supuhstar

回答