html - Firefox hr 不透明度显示不同

Question

<hr style="opacity:0.4" />

我有 firefox hr opacity 的问题，它在除 firefox 之外的所有其他浏览器上工作正常

有人知道如何解决这个问题吗？

Answer 1

它可以正常工作，但我认为您是在谈论 Firefox 的 hr 的 3d 默认 hr 渲染，为了使样式在整个浏览器中保持一致，请重置border，并再次应用border

hr {
   border: 0;
   border-top: 1px solid #f00;
   opacity: .1;
}

Demo

您还可以使用 rgba()如果你不想使用 opacity 之类的

border-top: 1px solid rgba(255,0,0,.1); //Equivalent to opacity: .1; for red color

---

另一方面，如果需要，您还可以声明一个名为 noshade="noshade"

的属性

<hr style="opacity:0.4" noshade="noshade" />

Demo