形狀 & 圖形
長久以來，在網站上製作進階的圖形效果不是得專注在圖片編輯程式，花很多時間，要不然就是做不到。
現在，遮罩 (masking)、混合模式 (blend mode)、濾鏡 (filter) 等之前似乎不太可能的效果，因為有了更廣泛的支援度，只要加上幾行程式碼就可以了。最讚的是：因為只要純 CSS 就辦得到，就再也不必放棄易達性 (accessibility) 與彈性了。
使用情況概觀
外圍圓圈的大小代表知道某功能的使用者總數，而內圈代表實際在使用的人數。 將滑鼠移到節點上，就可以看到詳細資料，還有代表此問卷答題者總數的區塊。
Usage by Years Of Experience
「全體」這欄顯示每一項技術的整體使用情況（也就是答題者選取了「會再使用」或「不會再使用」）， 而接下來的幾欄是依照「資歷年數」分組的使用比例。
比較亮的粉紅色背景，代表該分組比全體平均比例還要高。
資歷年數
全體
<1
1~2
2~5
5~10
10~20
>20
Filters & Effects
52.75%
26.87%
45.25%
55.54%
61.08%
65.86%
61.88%
object-fit
39.39%
25.55%
35.42%
42.27%
42.96%
45.4%
44.71%
clip-path
35.85%
23.35%
30.2%
35.59%
40.61%
43.21%
42.12%
blend-mode
29.87%
13.66%
17.97%
28.17%
36.73%
41.51%
41.18%
Masking
23.18%
9.25%
16.09%
23.55%
29.06%
29.86%
31.29%
Shapes
20.79%
18.5%
19.23%
21.08%
23.07%
20.76%
22.12%
與全體使用情況的差距：
-20%-10%0+10%+20%
Shapes
完成答題百分比 99.5% (11260)
完成答題百分比 99.5% (11260)
百分比%數量Σ
已經在用21.48%
知道是什麼，但沒用過47.15%
沒聽過/不確定那是什麼30.87%
CSS Shapes describe geometric shapes for use in CSS. For the Level 1 specification, CSS Shapes can be applied to floating elements.
object-fit
完成答題百分比 99.53% (11264)
完成答題百分比 99.53% (11264)
百分比%數量Σ
clip-path
完成答題百分比 99.51% (11262)
完成答題百分比 99.51% (11262)
百分比%數量Σ
Masking
完成答題百分比 99.44% (11254)
完成答題百分比 99.44% (11254)
百分比%數量Σ
blend-mode
完成答題百分比 99.4% (11249)
完成答題百分比 99.4% (11249)
百分比%數量Σ
已經在用33.75%
知道是什麼，但沒用過35.36%
沒聽過/不確定那是什麼30.28%
The <blend-mode> CSS data type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode properties.
Filters & Effects
完成答題百分比 99.59% (11271)
完成答題百分比 99.59% (11271)
百分比%數量Σ
推薦資源
Learn SVG Essentials & SVG Animation, v2
Build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!
感謝贊助我們的合作夥伴！ 深入詳情。