使用 CSS attr 函数制作进度条

Question

我正在尝试使用 CSS attr 函数制作进度条，这是我的代码：

.progress_bar {
  height: 10px;
  width: 10cm;
  background-color: #cae3ff;
}

.progress {
  height: inherit;
  width: attr(progress);
  background-color: #0077ff;
  transition: 1s cubic-bezier(1,0,0,1);
}

<div class="progress_bar">
  <div class="progress" progress="80%"></div>
</div>

正如您在运行代码片段中看到的那样，该栏不起作用，我阅读了有关 attr 函数的文档，但我仍然没有找到问题，你能请帮帮我？

Answer 1

attr() 原本打算与 content 属性一起使用，并且对它的支持很好。

CSS 值和单位模块级别 4 添加了对 any 属性（例如 width）的支持，但该规范目前工作草案和浏览器支持是 non-existent.

Answer 2

我找到了另一种方法:

.progress_bar {
  height: 10px;
  width: 10cm;
  background-color: #cae3ff;
}

.progress {
  height: inherit;
  background-color: #0077ff;
  transition: 1s cubic-bezier(1,0,0,1);
}

<div class="progress_bar">
  <div class="progress" style="width:80%"></div>
</div>

使用样式属性，而不是创建新属性。

Answer 3

尝试在 style 属性中使用 width 规则，例如 style="width:50%"

使用 CSS attr 函数制作进度条

Making a progress bar with the CSS attr function

html

css

attr