淺談CSS不經常使用的設置（1）——image-rendering

image-rendering屬性是向瀏覽器提供了一個提示，說明它應該用於縮放圖像的算法。

demo：

/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset

 屬性值說明：

auto：默認值。使用瀏覽器的標準算法最大化圖像的外觀；

crisp-edges：使用算法達達到在綻開時保持對比度和邊緣，在加工時不平滑色彩和使用模糊

pixelated：當圖片放大時，單純地去放大像素點，縮小時與auto效果同樣，即矢量化；

注：此屬性可應用於背景圖像、canvas元素、打印圖片設置以及內聯圖像。重要的是要注意，這些值尤爲使人困惑，由於缺少一致的瀏覽器支持。

兼容性：

‡ 支持pixelated 但不crisp-edges
* 支持 crisp-edges 但不 pixelated

效果：

參考文獻：

https://css-tricks.com/almanac/properties/i/image-rendering/

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering