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邊框圖像和視網膜屏幕

回答

相關問題