为什么渐变文本没有显示在边框填充上？ CSS

Question

我使用了一个名为 http://css3buttongenerator.com/ 的网站并添加了一个文本渐变，但由于某种原因，我不确定它是否没有在页面上显示所有的 css 编码。

.button {
  background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  font-family: Arial;
  font-size: 60px;
  background: #fff;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.button:hover {
  background: #000;
  text-decoration: none;
  background: linear-gradient(150deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div>
    <a class="button" href="course.html">Start</a>
</div>

Answer 1

在您的 .button CSS 规则中，您覆盖了 background 属性。

.button {
    /* first background */
    background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%); 

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-border-radius: 60;
    -moz-border-radius: 60;
    border-radius: 60px;
    font-family: Arial;
    font-size: 60px;

    /* again background here*/
    background: #000;

    padding: 10px 20px 10px 20px;
    text-decoration: none;
}

删除第二个背景，它会起作用。