Question

我的问题很简单，是否有办法（或黑客）制作边框图像＆＃39;物业支持Retina（高清晰度）显示？至少在基于Webkit的浏览器中。如果我尝试在边框图像中使用高分辨率图像，它看起来更大，我发现没有办法缩小它。如果我设置较小的边框宽度和/或切片大小，它会（自然地）裁剪图像，而不是缩小图像。我知道我可以模拟带背景的边框，但在这个问题中，我更想知道是否有一种方法可以使用边框图像＆＃39;。提前谢谢！

这是我的例子：

<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(button-border@2x.png) 10 10 repeat;
  }
}
</style>

Answer 1

这对我来说非常愚蠢，但我还没有尝试过设置“边框宽度”。到边框图像切片大小的一半。它可以很好地缩小图像，这是正确的答案。我为发布一个非常明显的问题而道歉，但也许它会帮助那些在我们面前看不到这一点的人，比如我：）

CSS3边框图像和Retina屏幕

1 个答案: