如何使用剪辑路径创建简单的圆形遮罩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？

回答

相关问题