无法使某些剪辑路径工作

Posted 2023-02-25

【中文标题】无法使某些剪辑路径工作

【英文标题】：Can't get certain clip-paths to work

【发布时间】：2014-07-21 21:54:54

【问题描述】：

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

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/）

【参考方案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 属性已被弃用。