为什么以下 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

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

我是不是用错了？我需要更改什么？

Answer 1

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

你引用的 MDN 文档很好，但并没有真正解释浏览器支持的位置，尽管文章确实以警告开头，它仍然是 'experimental technology'。

WebPlatform 是另一个很好的参考，它 docs for clip-path 甚至没有提到填充框。

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

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

Answer 2

正确的语法是

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

或

`img {
  clip-path: fill-box;
}`

因为填充框是关键字值。如果您使用的是基于 webkit 的浏览器，请尝试

`img {
  -webkit-clip-path: fill-box;
}`

Answer 3

如果您转到 the compatibility chart，您会发现您可能需要供应商前缀。

如果您使用 Chrome 或 Firefox，则需要使用 -web-kit-clip-path。

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

Why is the following CSS rule not working?

html

css

svg

clip-path