使用CSS attr函数制作进度条

问题描述

我正在尝试使用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,1);
}

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

通过运行代码段可以看到，该栏不起作用，我阅读了有关attr函数的文档，但仍然没有发现问题，请您能帮我吗？ >

解决方法

attr()最初旨在与content属性一起使用，并且对它的支持很好。

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

,

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

,

我找到了另一种方式：

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

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

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

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