有哪些用css css3來取代圖片的經典實例？

由於圖片很消耗資源，所以想知道有哪些效果是可以用css3的一些取巧的技巧來達到和圖片的一樣的效果的，不藉助javascript的話，純css。希望大牛們多分享，謝謝。

---

你所指的圖片是Icons圖片？如果是Icons圖片，一些簡單的是可以使用CSS代碼來繪製，比如

這些icon都是CSS繪製的：學習使用：before和：after偽元素

而且跟這個類似的資源在網上也是蠻多的：

1. Replacing Common UI Icons with CSS

2. Coding Kung-fu: 35 Graphics Built Purely With CSS3

3. 500+ Free Pure CSS Icons

4. Pure CSS drawings, 50 examples

5. Pure CSS GUI icons (experimental)

6. One div - The single element HTML/CSS icon database

如果是Icons的話，你還可以考慮使用Icons fonts:

1. 周刊3# Web字體圖標專刊

2. icon | 博客自由標籤

3. Icon UI | 案例自由標籤

相關的庫有：

1. Font Awesome Icons

2. Fontello - icon fonts generator

3. Icon Font SVG Icon Sets ? IcoMoon

4. Create your Icon Font in seconds

5. Fonticons

6. Entypo

7. Elusive Icons, the iconic font and CSS toolkit

8. https://linearicons.com/

9. https://useiconic.com/open/

10. Typicons

11. 10 Useful Free Font Icons You Should Bookmark

---

css的話估計還是有難度 至少得是CSS3才行 還得配合一些圖形字體

一個典型的就是用css做實心箭頭號

---

極客標籤的課程庫里，有許多CSS學習資源：http://www.gbtags.com/gb/gblibrary.htm

---

圓角，陰影，半透明顏色，漸變色，都算，因為ie8以下包括8都不支持

---

圓角啊，以前圓角框為了高度自適應，需要切兩張圖，為了高度和寬都能自適應要切4張圖。想想都覺得難受。

---

推薦閱讀：