我的问题很简单，有没有办法(或破解)使“边框图像”属性支持视网膜(高清)显示？至少在基于 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(<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670512131308094a05081503021527551f49170900" rel="noreferrer noopener nofollow">[email protected]</a>) 10 10 repeat;
}
}
</style>
最佳答案
这对我来说很愚蠢，但我还没有尝试将“border-width”设置为边框图像切片大小的一半。它将图像缩小得很好，这是正确的答案。我很抱歉发布了一个如此明显的问题，但也许它会帮助那些在他们面前没有看到这个明显问题的人，比如我:)
关于CSS3 边框图像和 Retina 屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30255819/