Question

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

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

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

Answer 1

否，这是不可能的，因为CSS只支持线性转换。

然而，这个类似问题的答案有一个例子，使用Adobe的实验过滤器来创建吸吮效果：How to use CSS 3d matrix to create a curved deformation effect

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属性。

使用css将图像变形为圆/弧

3 个答案: