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

【问题标题】：Why is the following CSS rule not working?为什么以下 CSS 规则不起作用？
【发布时间】：2016-05-22 01:15:02
【问题描述】：

我的标记中有一张图片：

<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

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

【问题讨论】：

我想知道是否支持任何浏览器（只是几何框，而不是整个剪辑路径）。
您使用的是什么浏览器？ caniuse.com/#search=clip-path

标签： html css svg clip-path

【解决方案1】：

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

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

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

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

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

【讨论】：

规范说 fill-box 或 stroke-box 有点成为 CSS 基本形状的 border-box。
感谢 Spudley，您的解释有所帮助。

【解决方案2】：

正确的语法是

`img { 剪辑路径：多边形（70% 0%、60% 40%、90% 90%、0% 50%）； }`

或

`img { 剪辑路径：填充框； }`

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

`img { -webkit-clip-path：填充框； }`

【讨论】：

【解决方案3】：

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

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

【讨论】：

如果您看到 MDN 页面（和规范），它会显示以下内容 - 如果指定结合，它提供了基本形状的参考框。
@Harry 你是对的。我不熟悉双杠语法。