CSS @property报unknownAtRules错误且规则不生效问题

编辑器黄色警告说明 #

你看到的未知at规则 @propertycss(unknownAtRules)黄色下划线警告，不是代码语法错误，是编辑器内置的CSS校验规则版本过旧，未收录@property这个标准CSS at规则导致的。只要你的目标浏览器满足版本要求（Chrome/Edge 85+、Firefox 128+、Safari 16.4+），该规则本身可以被浏览器正常解析。如果需要消除警告，升级编辑器的CSS语言支持插件，或是关闭未知at规则校验项即可。

代码错误修复 #

你的@property规则未生效、动画效果异常，是因为代码中存在3处拼写错误：

• @property注册块内的初始值属性名拼写错误：你写的是initail-value，正确属性名为initial-value，这是导致自定义属性注册失败的核心原因。
  正确的注册代码如下：

  @property --rotate {
    syntax: "<angle>";
    inherits: false;
    initial-value: 132deg;
  }
  

• #hope::before伪元素的渐变角度变量名拼写错误：你写的是var(--rorare)，正确变量名为var(--rotate)，会导致该伪元素的渐变无法读取动画更新的角度值。
• #hope::after伪元素的模糊属性名拼写错误：你写的是filler: blur(...)，正确属性名为filter，会导致外发光模糊效果失效。

额外注意：你在:root中定义的--card-width: calc(var(--card-height));没有实际计算逻辑，卡片宽高会完全相等，如果需要按比例设置宽度，可补充计算表达式，例如要做宽高比2:3的卡片可写为--card-width: calc(var(--card-height) / 1.5);，如果需求就是正方形卡片可忽略该问题。

修复后完整代码 #

@property --rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 132deg;
}
:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
  justify-content: center;
}

#hope {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 3rem;
  color: rgb(88 199 25 /0%);
  cursor: pointer;
  font-family: cursive;
  margin-top: 350px;
}

#hope:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 2s;
}

#hope:hover::before,
#hope:hover:after {
  animation: none;
  opacity: 0;
}

#hope::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate),
    #5ddcff,
    #3c67e3 43%,
    #4c00c2
  );
  position: absolute;
  z-index: -1;
  top: -1%;
  left: -2%;
  animation: spin 2.5s linear infinite;
}

#hope::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 10);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate),
    #5ddcff,
    #3c67e3 43%,
    #4e00c2
  );
  opacity: 1;
  transition: opacity 0.5s;
  animation: spin 3.5s linear infinite;
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

#believe {
  background: #3550ca;
  width: 250px;
  height: 100px;
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 3rem;
  color: rgb(88 199 25 /0%);
  cursor: pointer;
  font-family: cursive;
  margin-top: 350px;
}

内容的提问来源于stack exchange，提问作者william