Question

我正在尝试剪辑我的图像以便它们都是圆圈;但是，使用css clip-path似乎不起作用？我究竟做错了什么？我想我正在使用规范。

这是我的CSS：

img{
    height:200px;
    width:200px;
    position:absolute;
    -webkit-clip-path: circle(50%, 50%, 50%);
}

以下是此代码的JS小提琴：http://jsfiddle.net/vLer8/

我做错了什么？如何剪切我的图像以便它们都是圆圈？

Answer 1

看起来你想要采用here所示的不同方法。原因是大多数浏览器与-webkit-clip-path不兼容，只要研究表明，甚至更少与其循环功能兼容。

话虽如此，你最好的选择是使用边缘半径方法，这意味着你可能希望在使用时高度/宽度完全相同。以下是我的JsFiddle下面的示例HTML / CSS：

＆＃13;

img {
  position:absolute;
  border-radius: 50%;
}

＆＃13;

<img src="http://i.stack.imgur.com/NB1OV.jpg" 
     width="200px" height= "200px"/>

＆＃13;

仍然会将您的照片渲染为圆形，并且很容易使用。如果你想做任何非循环的事情，那么webkit将是一个很好的方法，如JsFiddle

所示。