CSS变量Polyfill attr()语法实例页面

展示

代码

• HTML：

  <button bgcolor="skyblue" radius="4">按钮</button>
  <button bgcolor="#00000040" radius="1rem">按钮</button>
  <button bgcolor="red" radius="50%">按钮</button>
  <button bgcolor="orange" radius="100% / 50%">按钮</button>

• CSS：

  button {
      border: 0;
      padding: .5em 1em;
  }
  button {
      --attr-bg: attr(bgcolor color);
      background-color: var(--attr-bg);
      --attr-radius: attr(radius px, 4px);
      border-radius: var(--attr-radius);
  }