使用css将图像扭曲成圆形/圆弧

是否有可靠的CSS方法将矩形图像扭曲/变形为圆形或弧形

我知道如何拉伸等等，但应用形状变形似乎是不可能的。是这样吗。。？可能是SVG转换。。？理想情况下，它将是一个可传递的转换

• 不是说使用边界半径来模拟平面形状，而是指图像的实际变形

需要这个吗

.circle {
  border-radius: 50%;
}

---

IE9+、Firefox 4+、Chrome、Safari 5+和Opera都支持border radius属性。

矩形何时以及如何变换？如果它处于启用状态（例如，处于

：悬停状态），则您只需：

HTML

<img src="#" class="img-circle" />

这里有一个例子：
否，这是不可能的，因为CSS只支持线性变换

然而，这个类似问题的答案有一个例子，使用Adobe的实验过滤器来创建吸吮效果：

.img-circle:hover {
    border-radius: 50%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}