掩码属性在Firefox中不起作用

Question

CSS掩码在Firefox中不起作用，但同样的CSS在Chrome中有效。我需要改变什么？

这就是我目前使用的：

.web-cam {
  width: 250px;
  height: 250px;
  border-radius: 125px;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
video {
  width: 500px;
  height: 500px;
  position: absolute;
  top: -125px;
  left: -125px;
}

<div class="web-cam">
  <video autoplay="autoplay">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  </video>
</div>

Chrome浏览器视图

Firefox浏览器视图

Answer 1

-webkit-mask-image是标准mask属性which is partially supported by Firefox的前缀属性。浏览器支持很多，并且在任何IE版本中都不存在。 Firefox仅支持使用SVG，而不支持您当前使用的渐变：

  

WebKit / Blink浏览器中的部分支持是指支持mask-image和mask-box-image属性，但缺少对规范的其他部分的支持。 Firefox中的部分支持仅指内联SVG掩码元素，即mask：url（#foo）。

一切都没有丢失！

好消息是，还有其他选择。这是在div上使用overflow: hidden的基本思想。下面的视频是＆＃34;剪辑＆＃34;由边界半径。它适用于支持border-radius属性和HTML5视频的任何浏览器。所以，几乎无处不在。

实施例

＆＃13;

＆＃13;

.web-cam {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
video {
  height: 100%;
  width: 200%;
  margin-left: -50px;
}

＆＃13;

<div class="web-cam">
  <video autoplay="autoplay">
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  </video>
</div>

＆＃13;

＆＃13;

＆＃13;