0

我的标记中有一张图片：

<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

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

4

3 回答 3

2

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

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

WebPlatform 是另一个很好的参考，它的剪辑路径文档甚至没有提到填充框。

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

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

于 2016-05-21T16:04:48.023 回答
1

如果您查看兼容性图表，您会发现您可能需要供应商前缀。

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

于 2016-05-21T16:18:29.717 回答
1

正确的语法是

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

或者

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

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

`img {
  -webkit-clip-path：填充框；
}`
于 2016-05-21T16:06:24.913 回答