CSS3边界图像和视网膜屏幕

Question

我的问题很简单，有没有办法（或hack）使'边界图像'属性'属性支持视网膜（高清晰度）显示？至少在基于WebKit的浏览器中。如果我尝试在边界图像中使用高分辨率图像，它看起来更大，我发现将其缩小。如果我设置了较小的边框宽度和/或切片尺寸，它将（自然地）裁剪图像，而不是将其缩小。我知道我可以模拟具有背景的边界，但是在这个问题中，我更感兴趣地知道是否有一种使用"边界形象"的方法。预先感谢您！

这是我的示例：

<style>
.border-button {
  border: 20px solid transparent;
  border-image: url(button-border.png) 20 20 repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-button {
    border: 10px solid transparent;
    border-image: url([e-mail]) 10 10 repeat;
  }
}
</style>

Answer 1

这对我来说非常愚蠢，但是我没有尝试将"边框宽度"设置为边框图像切片的一半。它可以将图像缩小范围，这是正确的答案。对于发布一个如此明显的问题，我深表歉意，但也许它会帮助其他人在他们面前看不到这一点的人，例如我：）