如何使用剪輯路徑創建簡單的圓形遮罩CSS3？

我想了一圈夾適用於我的圖片如何使用剪輯路徑創建簡單的圓形遮罩CSS3？

<style> 
.circle { 
    -webkit-clip-path: circle(50%,50%,10%); 
    clip-path: circle(50%,50%,10%); 
}; 

</style> 
</head> 

<body> 
<img src="image1.jpg" width="1024" height="768" alt="" class="circle"/> 
</body>

，這只是利己不行

.circle { 
 
    -webkit-clip-path: circle(50%,50%,10%); 
 
    clip-path: circle(50%,50%,10%); 
 
};

<img src="http://cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg" width="1024" height="768" alt="" class="circle"/>

我不希望使用任何邊界半徑！

來源

2014-11-03 yarek

退房http://caniuse.com/#feat=css-clip-path，看來夾路徑不能很好地支持，只有作品在相當特殊的情況下。 – 2014-11-04 03:09:27

看樣子圓語法是更多的東西一樣

clip-path: circle(50% at 50% 10%);

所以改爲

.circle { 
    -webkit-clip-path: circle(50% at 50% 10%); 
    clip-path: circle(50% at 50% 10%); 
}

小提琴here

我發現了它的here一提的MDN

circle（[<shape-radius>] [at <position>]）shape-radius參數爲圓的半徑爲。位置參數定義圓的中心點，並具有與背景位置相同的語法（有關詳細信息，請參閱背景位置）。

尼斯解釋資源發現here上webplatform.org

來源

2014-11-03 22:42:39 OJay

如何使用剪輯路徑創建簡單的圓形遮罩CSS3？

回答

相關問題