CSS三倍圖標是指在移動設備Retina屏幕上顯示清晰的圖標，其實就是提供3倍的圖像資源，以適配高分辨率的設備。現在肯定很多網頁都已經用到了。

.icon {
background-image: url("icon@3x.png"), url("icon@2x.png");
background-repeat: no-repeat;
background-size: 24px 24px;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.icon {
background-image: url("icon@3x.png"), url("icon@2x.png"), url("icon.png");
background-size: 16px 16px, 24px 24px;
}
}

上面是一個例子，定義了一個class叫.icon，設置了background-image為三倍圖和兩倍圖的鏈接，這樣在高分辨率設備上會使用三倍圖，低分辨率設備上使用兩倍圖，達到清晰度的提升。同時，對于使用@media媒體查詢來做響應式處理的，可以再次添加一倍圖，實現不同分辨率的設備都可以上色。