无法使某些剪辑路径工作

Question

我知道这非常简单，但我似乎无法在此示例中使用简单的椭圆遮罩：

http://jsfiddle.net/foomarks/m5272/3/

img {
position: absolute;
-webkit-clip-path: ellipse(200px,200px,50px,100px);    
}

任何人都对我做错了什么有任何提示。

（我的理解是没有必要为基本形状创建 SVG 路径：http://www.html5rocks.com/en/tutorials/masking/adobe/）

Answer 1

今年年初形状的语法发生了变化。

是：

• inset(<margin>[ round <border-radius>]?) 用于矩形 - demo（<margin> 和 <border-radius> 的值分别与 margin 和 border-radius 属性的值完全相同）
• circle([<radius>]?[ at <position>]?) for circle - demo（类似于您指定径向渐变的方式）

• ellipse([<radius>{1,2}]?[ at <position>]?) 用于椭圆 - demo

• 通用多边形也是如此

Chrome 34+、Opera 21+ 和 Safari 8 支持形状的新语法。

此外，该文章中提到的 clip 属性已被弃用。