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

Question

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

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

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

Answer 1

不，这还不可能，因为 CSS 只支持线性变换。

但是，这个类似问题的答案有一个使用 Adob​​e 的实验性过滤器创建吸吮效果的示例：如何使用 CSS 3d 矩阵创建弯曲变形效果

Answer 2

矩形何时以及如何转换？如果它是一个:hover状态，那么你所需要的就是：

HTML

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

CSS

.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;
}

这是一个例子：http: //jsfiddle.net/YcacT/

Answer 3

你需要这个吗？

.circle {
  border-radius: 50%;
}

http://jsfiddle.net/6AHTb/

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