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;
}

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

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

1 个答案: