如何通过@supports检测CSS @property 实现按钮渐变边框悬停过渡

@supports 检测 @property 特性的实现方法 #

直接使用如下条件即可精准识别支持CSS @property规则的浏览器：

@supports (--test: <color>) {
  /* 仅支持@property的浏览器生效的样式 */
}

不支持@property的浏览器无法识别尖括号包裹的类型语法作为自定义属性值，会直接判定该条件为假，跳过块内所有代码，不会出现悬停跳变问题。

完整兼容实现（styled-components版本） #

代码逻辑分层：

• 所有浏览器默认加载基础样式+降级悬停效果（亮度调整）
• 支持@property的浏览器自动加载渐变过渡逻辑，覆盖降级效果，实现平滑的渐变填充过渡
• 无多余JS逻辑，纯CSS实现特性检测，不会出现伪元素方案的层错位问题

import styled from 'styled-components';

const GradientButton = styled.button`
  /* 基础按钮重置样式 */
  padding: 10px 28px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;

  /* 基础状态：纯色填充+渐变边框 */
  background: linear-gradient(
      to right,
      ${props => props.background || '#202020'},
      ${props => props.background || '#202020'}
    )
    padding-box,
    linear-gradient(to right, #0000ff, #ff00ff) border-box;

  /* 降级悬停效果：不支持@property的浏览器生效 */
  transition: filter 0.2s ease;
  &:hover {
    filter: brightness(1.15);
  }

  /* 支持@property的浏览器启用渐变平滑过渡效果 */
  @supports (--color1: <color>) {
    /* 注册带类型的自定义属性 */
    @property --color1 {
      syntax: "<color>";
      initial-value: ${props => props.background || '#202020'};
      inherits: false;
    }
    @property --color2 {
      syntax: "<color>";
      initial-value: ${props => props.background || '#202020'};
      inherits: false;
    }

    /* 重写背景引用注册后的自定义属性 */
    background: linear-gradient(
        to right,
        var(--color1),
        var(--color2)
      )
      padding-box,
      linear-gradient(to right, #0000ff, #ff00ff) border-box;
    
    /* 给自定义属性添加过渡 */
    transition: --color1 0.3s ease, --color2 0.3s ease;

    /* 覆盖降级效果，悬停时修改自定义属性触发渐变过渡 */
    &:hover {
      filter: none;
      --color1: #0000ff;
      --color2: #ff00ff;
    }
  }
`;

export default GradientButton;

注意事项 #

• 所有@property相关规则、渐变过渡逻辑必须全部放在@supports块内部，避免不支持的浏览器读取到自定义属性赋值逻辑产生生硬跳变
• 该方案不存在伪元素模拟方案的尺寸变化错位问题，所有状态下边框和填充层完全对齐
• 降级效果可根据需求自行替换，不需要渐变过渡的场景下，亮度调整、透明度变化等轻量效果都可以正常使用

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