线性渐变在Safari和Internet Explorer中不起作用

Question

我可以在Chrome和Firefox上显示以下线性渐变，但不能在Safari或Internet Explorer中显示。

有谁能告诉我哪里出错了？

.mybox {
  width: 120px;
  position: relative;
  margin: 0;
  padding:0;
  label {
    color: #000;
    width: 120px;
    height: 120px;
    padding:0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 120px;
    border-radius: 50%;
   border: 2px solid black;
    &:after {
      box-sizing: border-box;

      content: '';
      width: 120px;
      height: 120px;
      position: absolute;
      top: 0px;
      left: 0px;
      border: 2px solid red;
      background: red;
      opacity: 0;
      border-radius: 50%
    }


  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }    
  }
}

（我在Ubuntu上使用Wine和modern.ie virtualbox测试Safari，后者使用IE浏览器）

Answer 1

这是我用于所有渐变的神奇工具。我从来没有遇到过这个问题！对不起，我无法弄清楚您的确切问题，但也许这会有所帮助。

http://www.colorzilla.com/gradient-editor/

Answer 2

尝试使用-webkit-gradient：/ *您的渐变代码* /;