我试图在CSS中使用attr()设置元素的宽度，但它不起作用。 Chrome说“无效的资产价值”，但我不知道是怎么回事。
我试图使用属性“prog”作为.progress div的百分比宽度。
<div class="progresscontainer">
<div class="progress" prog="10">
</div>
</div>
.progresscontainer {
position:absolute;
background-color:black;
width:500px;
height:100px;
border-radius:5px;
border:1px solid black;
overflow:hidden;
}
.progress {
background-color: green;
background: -webkit-linear-gradient(top,transparent -100%,rgba(255,255,0.5) 50%,transparent 200%),-webkit-linear-gradient(top,lime 0%,lightgreen 50%,green 50%,darkgreen 100%);
background: -moz-linear-gradient(top,-moz-linear-gradient(top,darkgreen 100%);
background: -ms-linear-gradient(top,-ms-linear-gradient(top,darkgreen 100%);
background: linear-gradient(top,linear-gradient(top,darkgreen 100%);
position:absolute;
height:100%;
width: attr(prog %);
}
解决方法
这是CSS的一个实验性的，或至少是草案的功能，目前，根据Mozilla开发人员网络的文档，它只兼容CSS内容属性(可以在其中返回一个放置在伪元素内的字符串)但不能(还)用于生成其他属性的值。
参考文献：
> attr() (at MDN)。@H_403_15@> attr() (at W3C)。
