Html CSS按钮效果无法跨浏览器工作

CSS按钮效果存在一些问题，无法跨浏览器工作

它在Chrome中的显示与我所希望的一样，但不是Firefox

似乎找不到问题的根源。这是我的

a.soft{
显示：内联块；
字体系列：“瓦雷拉圆形”，无衬线；
填充：2rem3rem；
字体大小：1.25vw；
盒影：-10px-10px 20px 0#e6e6，10px 10px 20px 0#ABABAB，插图10px 10px 20px 0#e6e6，插图-10px-10px 20px 0#ABABAB；
边界半径：50px；
变换：长方体阴影1s易入易出；
背景色：#666666；
-webkit背景剪辑：文本；
颜色：透明；
文本阴影：rgba（2452452452451.0）2px2p5px；
字体大小：粗体；
}
a、 软：悬停{
背景色：#ddd；
盒影：-10px-10px 20px 0#e6e6，10px 10px 20px 0#ABABAB，插图10px 10px 20px 0#e6e6，插图-10px-10px 20px 0#ABABAB；
颜色：#888；
}
a、 软：活动{
盒影：0 0 20px 0#e6e6，0 0 20px 0#ABABAB，插图0 0 20px 0#e6e6，插图0 0 0 20px 0#abababab；
颜色：#D8D8D8；
文本阴影：1px 1px 2px白色；
-webkit背景剪辑：文本；
字体大小：粗体；
}

---

按钮

我设法找到了一条firefox特有的规则，它纠正了一切

@-moz-document url-prefix() {
  a.soft {
    background-color: #ddd;
    box-shadow: -10px -10px 20px 0 #E6E6E6,
      10px 10px 20px 0 #ABABAB,
      inset 10px 10px 20px 0 #E6E6E6,
      inset -10px -10px 20px 0 #ABABAB;
    color: #888;
  }
}

---

请您编辑您的问题，详细说明哪些方面确实有效/未达到预期效果，好吗？我的第一个猜测是，你的问题是因为你使用的是

-webkit背景剪辑

，而没有常规的

背景剪辑

，而且Firefox不是webkit浏览器（你需要使用

mox背景剪辑

），但实际上，当我在Mac上的Firefox中打开它时，它看起来与Chrome一样。具有讽刺意味的是，我在FF、Chrome和Safari之间看到的唯一一个悬停动作是FF，所以它似乎是唯一一个对我有效的浏览器。