CSS @supports媒体的功能@property之类的功能

Question

我正在尝试使用此按钮进行样式，并带有一个梯度边框，在悬停时充满了该梯度，但我想在过渡时做到这一点，否则看起来很糟糕。

我看到并实施了这种方法以制定按钮： （我正在使用样式的组件，所以这就是与道具的交易）

background: linear-gradient(
        to right,
        var(--color1, ${(props) => props.background || "#202020"}),
        var(--color2, ${(props) => props.background || "#202020"})
      )
      padding-box,
    linear-gradient(to right, #0000ff, #ff00ff) border-box;

问题是在我想进行过渡时出现的，因为您无法过渡该梯度。 我尝试了边框的伪元素解决方案，并用不透明的过渡进行过渡，但是背景上的元素并不总是100％重新扎屏屏幕时，看起来很糟糕。

我发现该解决方案在Chrome上非常有效：

  @property --color1 {
syntax: "<color>";
initial-value: ${(props) => props.background || "#202020"};
inherits: false;
  }

  @property --color2 {
    syntax: "<color>";
    initial-value: ${(props) => props.background || "#202020"};
    inherits: false;
  }
:hover {
      --color1: #0000ff;
      --color2: #ff00ff;
  }

在不悬停的Firefox（也许还有其他浏览器）中，它可以正常工作，因为它无法识别-Color1或2的定义，并进入后备。 但是，当我悬停并定义变量时，问题就到了，因此颜色立即弹出并且看起来不好。

我对解决方案的想法是使用@supports媒体查询的东西，但我不知道如何将其与@property这样的功能使用，我找不到任何内容。有人知道如何实施该媒体吗？还是其他解决方案？

另外：其他浏览器的解决方案不需要是梯度过渡，它可以像过滤器一样简单：亮度（x％）

Answer 1

在这种特殊情况下，可以使用混合模式解决您的问题，并且可以使用交叉浏览器来解决。

.box {
  width: 200px;
  height: 100px;
  border: 10px solid #0000;
  background: 
    linear-gradient(to right, #0000ff, #ff00ff) border-box,
    #202020 padding-box;
  background-blend-mode: darken;
  transition: .5s;
  
  color:#fff;
  text-align:center;
  line-height:100px;
  font-size:30px;
  cursor:pointer;
}

.box:hover {
  background-color:#0000;
}

<div class="box"> some text </div>