html - 为什么以下 CSS 规则不起作用？

Question

我的标记中有一张图片:

<img src="http://img-url/img.jpg" />

这是我的 CSS:

img {
  clip-path: polygon(70% 0%, 60% 40%, 90% 90%, 0% 50%) fill-box;
}

如果我删除 fill-box 部分，它就会工作。那么，我是否以错误的方式使用它？ MDN 的语法似乎是:

<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

属性链接:https://developer.mozilla.org/en/docs/Web/CSS/clip-path

我没有正确使用它吗？我需要更改什么？

Answer 1

基本上，原因是浏览器尚不支持您尝试使用的功能。

您引用的 MDN 文档很好，但并没有真正解释浏览器支持的位置，尽管文章确实以它仍然是“实验性技术”的警告开头。

WebPlatform 是另一个很好的引用，它的 docs for clip-path更不用说填充框了。

您可能还会发现，与常规 HTML 元素相比，SVG 支持的裁剪语法有所不同，即使在同一浏览器中也是如此。特别是，填充和描边是 SVG 属性，因此在 HTML 上下文中使用 fill-box 或 stroke-box 可能有意义也可能没有意义。

浏览器对这些极端情况语法的支持可能会随着时间的推移而改进，但目前我能建议的最佳选择是减少您的使用，以使用适用于当前浏览器的语法。