如何让 webkit 样式与 Vue.js 一起使用？

Question

我已将此 Codepen 演示中的样式复制：https://codepen.io/CSWApps/pen/MmpBjV 到我自己的代码中，如下所示：

<style>

body {
  background-color: #5c4084;
  text-align: center;
  padding: 50px;
}

.container {
  padding: 40px 80px;
  background-color: #fff;
  border-radius: 8px;
}
.heading {
  h1 {
    background: -webkit-linear-gradient(#fff, #999);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-align: center;
    margin: 0 0 5px 0;
    font-weight: 900;
    font-size: 4rem;
    color: #fff;
  }
  h4 {
    color: lighten(#5c3d86,30%);
    text-align: center;
    margin: 0 0 35px 0;
    font-weight: 400;
    font-size: 24px;
  }
}

</style>

但是，从 H1 开始，我的 IDE 突出显示行 background: -webkit-linear-gradient(#fff, #999); 并显示错误消息“应为分号”。我可以确认没有添加线性渐变。

Answer 1

如果您点击设置然后 CSS，您可以看到一些旧版本的 Bootstrap 正在使用中。

注意：我会推荐更新版本的 Bootstrap，或者更好的 Bootstrap-Vue

如何让 webkit 样式与 Vue.js 一起使用？

How do I get webkit styling to work with Vue.js?

css

gradient

vue.js