CSS var()函数初始值、默认值使用示意实例页面

展示

代码

• HTML：

  <button>点击我</button>

• CSS：

  button {
      /* 这里的空格很重要 */
      --open: ;
      color: #2a80eb;
      -webkit-text-fill-color: #fff;
      border-radius: 4px;
      padding: 9px 20px;
      border: 1px solid var(--open, rgba(0,0,0,.1));
      box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));
      background: var(--open, linear-gradient(#0003, transparent)) currentColor;
      text-shadow: var(--open, -1px -1px #0003);
      transition: .15s;
  }
  button:active {
      /* 任意全局关键字都可以 */
      --open: inherit;
  }