我有这个在我的HTML文档：
<a class="wbutton tint" data-tint="rgba(255,.5)" href="#">This should be red,with an opacity of 0.5</a>
并在CSS文件中：
.window > .content .wbutton.tint {
border: solid thin attr(data-tint,color);
Box-shadow: inset 0 0 50px attr(data-tint,color);
}
Firefox在Firebug中返回一个CSS错误。我做错了什么？
根据W3C specs for the attr() function，它应该工作。
(另外，有a page about attr() in the MDN Wiki，所以我认为它应该至少在Firefox中工作)
解决方法
看看规范中给出的语法：
attr( <attr-name> <type-or-unit>? [,<fallback> ]? )
.window > .content .wbutton.tint {
border: solid thin attr(data-tint color);
Box-shadow: inset 0 0 50px attr(data-tint color);
}
然而，即使你有正确的语法，它也不会工作。事实证明，没有已知的实现attr()的3级版本，但截至2012年2013年2014年2015年2016年2017年。更糟的是，it’s still at-risk as of the latest editor’s draft of the spec。
但不是所有的都失去了：如果你想看到这个功能在即将推出的浏览器中实现，还有时间在相关的反馈渠道中建议它！以下是迄今为止提出的建议：
> Microsoft Edge Platform，目前不足考虑(ht @L_403_4@！)
为了记录，基本的Level 2.1 version完全支持所有主要浏览器的最新版本，包括IE8和Firefox 2，并且与用于生成内容的：before和：after伪元素的content属性一起使用。 Mozilla开发者网络(MDN)浏览器兼容性表仅适用于此版本，而不适用于CSS3版本。
