这个 CSS 后台语法有什么问题？

Question

在这个 link: [http://codepen.io/FelixKiunke/pen/nvDcj][1] 你可以看到这个人做了一个漂亮的圆圈，每 10 秒完成一次填充它的边缘。这就是我要复制的内容。

我已经从这个页面复制了编译好的 CSS 和 HTML 并将其放在一些本地文件中。当我打开带有此内容的页面时，Chrome 告诉我背景 CSS 元素的语法无效，因此圆圈根本不显示。

为什么语法在我复制的代码中无效，但在网站上却没有？

    /*
    NOTE ABOUT THE FORK:
    This demonstrates the use of radial gradients on the Pie Spinner by HugoGiraudel (http://codepen.io/HugoGiraudel/pen/BHEwo).
    Most of the code is unchanged, too make my changes clear I have removed the previous comments.
    I added radial gradients (see the color change on hover) and a demonstration for the responsive size (click), and a little "Click me" pseudo element.
    */
    * {
      box-sizing: border-box;
    }
    
    .wrapper {
      width: 250px;
      height: 250px;
      margin: 10px auto;
      position: relative;
      background: white;
      /*The bigger size at click:*/
      transition: width 0.5s, height 0.5s;
    }
    .wrapper.big {
      width: 400px;
      height: 400px;
    }
    
    .pie {
      width: 50%;
      height: 100%;
      transform-origin: 100% 50%;
      position: absolute;
      /*
      Here comes the radial gradient.
      Note that it has to have the alignment "left center" for the .filler,
      and "right center" for the .spinner!
      */
    /*CHROME SAYS THE NEXT LINE IS INVALID*/
      background: radial-gradient(left center, circle, #00ccff 0px, #000088 100%);
      /* The borders mustn't be transparent, that looks really ugly! */
      border: 20px solid #024;
    }
    
    .spinner {
      border-radius: 100% 0 0 100% / 50% 0 0 50%;
      z-index: 200;
    /*CHROME SAYS THE NEXT LINE IS INVALID*/
      background: radial-gradient(right center, circle, #00ccff 0px, #000088 100%);
      border-right: none;
      animation: rota 10s linear infinite;
    }
    .spinner::after {
      position: absolute;
      height: 20px;
      top: 0px;
      right: 0px;
      content: "Click me!";
      transform: rotate(270deg);
      transform-origin: 100% 100%;
      color: white;
      font: 16px/20px sans-serif;
    }
    
    .wrapper:hover .pie {
      border-color: #620;
    }
    .wrapper:hover .filler {
    /*CHROME SAYS THE NEXT LINE IS INVALID*/
      background: radial-gradient(left center, circle, #ffbb11 0px, #dd6600 100%);
    }
    .wrapper:hover .spinner {
      background: radial-gradient(right center, circle, #ffbb11 0px, #dd6600 100%);
    }
    
    .filler {
      border-radius: 0 100% 100% 0 / 0 50% 50% 0;
      left: 50%;
      opacity: 0;
      z-index: 100;
      animation: fill 10s steps(1, end) infinite;
      border-left: none;
    }
    
    .mask {
      width: 50%;
      height: 100%;
      position: absolute;
      background: inherit;
      opacity: 1;
      z-index: 300;
      animation: mask 10s steps(1, end) infinite;
    }
    
    @keyframes rota {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes mask {
      0% {
        opacity: 1;
      }
      50%, 100% {
        opacity: 0;
      }
    }
    @keyframes fill {
      0% {
        opacity: 0;
      }
      50%, 100% {
        opacity: 1;
      }
    }

    <div class="wrapper">
      <div class="pie spinner"></div>
      <div class="pie filler"></div>
      <div class="mask"></div>
    </div>

更新这是更新的（和工作中的）CSS:

/旋转器/ /* 关于叉子的注意事项：这演示了 HugoGiraudel (http://codepen.io/HugoGiraudel/pen/BHEwo) 在 Pie Spinner 上使用径向渐变。大部分代码没有改变，也让我的更改清楚我已经删除了以前的评论。我添加了径向渐变（请参阅悬停时的颜色变化）和响应大小（单击）的演示，以及一点 "Click me" 伪元素。 */

* {
  box-sizing: border-box;
}

.wrapper {
  width: 250px;
  height: 250px;
  margin: 10px auto;
  position: relative;
  background: white;
  /*The bigger size at click:*/
  transition: width 0.5s, height 0.5s;
}
.wrapper.big {
  width: 400px;
  height: 400px;
}

.pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  /*
  Here comes the radial gradient.
  Note that it has to have the alignment "left center" for the .filler,
  and "right center" for the .spinner!
  */
  background: -webkit-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: -webkit-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: -moz-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: -ms-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: -o-linear-gradient(circle at left center, #00ccff 0px, #000088 100%);
  background: radial-gradient(circle at left center, #00ccff 0px, #000088 100%);
  /* The borders mustn't be transparent, that looks really ugly! */
  border: 20px solid #024;
}

.spinner {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  z-index: 200;
  background: -webkit-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: -webkit-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: -moz-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: -ms-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: -o-linear-gradient(circle at right center, #00ccff 0px, #000088 100%);
  background: radial-gradient(circle at right center, #00ccff 0px, #000088 100%);
  border-right: none;
  -webkit-animation: rota 10s linear infinite;
  -moz-animation: rota 10s linear infinite;
  -o-animation: rota 10s linear infinite;
  animation: rota 10s linear infinite;
}
.spinner::after {
  position: absolute;
  height: 20px;
  top: 0px;
  right: 0px;
  content: "Click me!";
  transform: rotate(270deg);
  transform-origin: 100% 100%;
  color: white;
  font: 16px/20px sans-serif;
}

.wrapper:hover .pie {
  border-color: #620;
}
.wrapper:hover .filler {
    background: -webkit-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: -webkit-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: -moz-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: -ms-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: -o-linear-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
    background: radial-gradient(circle at left center, #ffbb11 0px, #dd6600 100%);
}
.wrapper:hover .spinner {
    background: -webkit-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: -webkit-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: -moz-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: -ms-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: -o-linear-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
    background: radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%);
}

.filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    left: 50%;
    opacity: 0;
    z-index: 100;
    -webkit-animation: fill 10s steps(1, end) infinite;
    -moz-animation: fill 10s steps(1, end) infinite;
    -o-animation: fill 10s steps(1, end) infinite;
    animation: fill 10s steps(1, end) infinite;
    border-left: none;
}

.mask {
    width: 50%;
    height: 100%;
    position: absolute;
    background: inherit;
    opacity: 1;
    z-index: 300;
    -webkit-animation: mask 10s steps(1, end) infinite;
    -moz-animation: mask 10s steps(1, end) infinite;
    -o-animation: mask 10s steps(1, end) infinite;
    animation: mask 10s steps(1, end) infinite;
}

@-webkit-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-moz-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-o-keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rota {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}




@-webkit-keyframes mask {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@-moz-keyframes mask {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@-o-keyframes mask {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes mask {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}



@-webkit-keyframes fill {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

@-moz-keyframes fill {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

@-o-keyframes fill {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

@keyframes fill {
  0% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

  [1]: http://codepen.io/FelixKiunke/pen/nvDcj

Answer 1

语法确实不正确。应该是radial-gradient(circle at right center, #ffbb11 0px, #dd6600 100%)。这在 CodePen 中也是不正确的，一旦你修复它，动画看起来就会不同（当你悬停它时它有一个 'Click here' 号召性用语）。不过这不是核心问题。

动画在您的版本中根本不起作用的原因是动画属性在 Chrome 中需要 -webkit- 前缀。

在CodePen中，使用了-prefix-free，这就是它起作用的原因。它是一个自动添加 CSS 属性前缀版本的库。 CodePen 也可以使用 Autoprefixer （另一个这样的库）或两者都不使用。一旦你 select 'neither'，你会发现 CodePen 示例也不再有效，因为 (S)CSS 不包含 [=] 所需的前缀版本24=] 属性。

因此，解决方案：要么也使用一个库，要么为 Chrome（可能还有其他浏览器）添加所需的前缀属性。

这个 CSS 后台语法有什么问题？

What is wrong with this CSS background syntax?

css

background

geometry