css - Angular 12 CSS 不正确

问题描述

我的角度组件中有以下 css

.folders {
  border-left: 5px solid #b8744f;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: inset 0 0 1px #fff;
  -webkit-box-shadow: inset 0 0 1px #fff;

  /*START*/
  background: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#327aa4),
    color-stop(45%, #2e4b5a),
    to(#5cb0dc)
  );
  /*END*/

  background: -moz-linear-gradient(
    top,
    rgba(50, 123, 165, 0.75),
    rgba(46, 75, 90, 0.75) 50%,
    rgba(92, 176, 220, 0.75)
  );
  border: solid 1px #102a3e;
  box-shadow: inset 0 0 1px #fff;
  display: inline-block;
  overflow: visible;
}

根据 IDE，注释 START 和 END 之间标记的部分不正确。它一直在抱怨如下：

参数不匹配（[线性 | 径向] , , [ ,]? [, ]? [, [color-stop() | to() | from()]]*)

-webkit-gradient 在 Angular 12 中不起作用它一直指向一个参数

标签： cssangular

使用线性梯度：

html, body {
  width: 100%; 
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(
    #327aa4,
    #2e4b5a 45%,
    #5cb0dc
  );
}

CSS供应商/浏览器前缀喜欢-webkit或-moz不是必需的，并且使代码更混乱并且您重复自己（DRY）。我建议将 Angular 与SCSS一起使用。Angular 开箱即用地支持它。

如果要旋转渐变（例如水平），可以添加 value 90deg。请参阅文档和网络。

css - Angular 12 CSS 不正确

问题描述

解决方案

推荐阅读