使用css3的radial-gradient實現一個穿透效果的圓

先看需求：

，需要做一個這個效果。一般怎麼做？那個半圓切成圖片，可以解決一種情況——圖片背景固定並且不平鋪。

如果背景圖片是花紋平鋪，切不是固定不動的呢？切好的半圓就無法與背景圖對應

現在使用css3的放射狀漸層是可以實現這個透明的圓的，這樣一來，如果圓是透明的，就不用擔心背景圖片的情況了

background-image: repeating-radial-gradient(500px 500px at 50% 0px ,transparent 0%, transparent 50px,#0cc 50px, #0cc 200%);

代碼講解：

500px 500px at 50% 0px ,

白色地區背景色的寬高，和圓心座標

transparent 0%, transparent 50px,#fff 50px, #fff 200%

從圓心到小圓上的背景色是透明的，從小圓上到大圓上的背景色是#0cc

