CSS3边框图像和视网膜屏幕

我的问题很简单，有没有一种方法（或黑客）使'边界图像'属性支持视网膜（高清晰度）显示？至少在基于Webkit的浏览器中。如果我尝试在边框图像中使用高分辨率图像，它看起来会更大，而我发现无法缩放它。如果我设置较小的边框宽度和/或切片大小，它将（自然）裁剪图像，而不是缩小。我知道我可以模拟带背景的边框，但在这个问题中，我更感兴趣的是知道是否有方法使用“边框图像”。先谢谢你！CSS3边框图像和视网膜屏幕

这是我的例子：

<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([email protected]) 10 10 repeat; 
    } 
} 
</style>

来源

2015-05-15 Michael Bunkin

这是非常愚蠢的我，但我没试过设置“边框宽度”边境形象片的一半大小。它可以很好地缩放图像，这是正确的答案。我很抱歉发布了一个非常明显的问题，但也许它会帮助其他人在他们面前看不到这种明显的问题，比如我:)

来源

2015-05-15 09:25:40

CSS3边框图像和视网膜屏幕

回答

相关问题