如何使用 CSS3 创建自定义属性

要使用CSS3创建自定义属性，您需要使用CSS变量（也称为CSS自定义属性）

1. 在CSS中定义变量：

在CSS样式表的开头，使用:root选择器定义一个变量。变量名通常使用--前缀。例如，定义一个名为main-color的颜色变量：

:root {
  --main-color: #ff5733;
}

您也可以在其他选择器中定义变量，但这样它们将仅对该特定选择器可用。

2. 在CSS中使用变量：

要在样式表中任何地方使用此变量，只需使用var()函数，后跟变量名称。例如，将上面定义的main-color变量应用于一个<div>的背景颜色：

div {
  background-color: var(--main-color);
}

3. 在HTML中使用自定义属性：

虽然自定义属性主要在CSS中使用，但您还可以在HTML元素上设置它们的值。例如，将data-main-color属性设置为与CSS变量相对应的值：

<div data-main-color="var(--main-color)">Hello, World!</div>

然而，请注意，在HTML中设置自定义属性的值不会影响CSS样式。您需要使用JavaScript来读取HTML元素上的自定义属性值，并将其应用于相应的CSS元素。

4. 使用JavaScript操作自定义属性：

要在JavaScript中访问HTML元素上的自定义属性值，请使用element.getAttribute()方法。例如，获取上面HTML示例中的data-main-color值：

const divElement = document.querySelector('div');
const mainColorValue = divElement.getAttribute('data-main-color');
console.log(mainColorValue); // 输出：var(--main-color)

要将此值应用于CSS元素，请使用element.style.setProperty()方法：

const someElement = document.querySelector('.some-class');
someElement.style.setProperty('--main-color', mainColorValue);

这样，您就可以在CSS3中使用自定义属性了。