具有淡出效果的水平线

Question

我正在尝试用类似这样的渐变线替换引导程序 <hr />。

到目前为止，我已经尝试过使用这个 mixin：

.horizontal-gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background-image: -webkit-linear-gradient(left, @startColor, @endColor);
  background-image: -moz-linear-gradient(left, @startColor, @endColor);
  background-image: -ms-linear-gradient(left, @startColor, @endColor);
  background-image: -o-linear-gradient(left, @startColor, @endColor);
}

但是……它没有用。

编辑

我决定创建一个单独的类（<hr/> 将来可能会很有用）。但是，我仍然无法让它工作......

.post-title-line {
  background-color: #403a41;
  background-image: -webkit-gradient(linear, left top, right top, from(#403a41), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  width: 100%;
  height: 1px;
  position: relative;
}

<div class="post-title-line"></div>

Answer 1

原因：

您的问题不在于 mixin，而在于颜色的选择。 rgba(0,0,0,0) 等效于 transparent 但您已经在选择器中设置了 background-color。如此有效地，您的渐变从#403a41 变为#403a41，这只会产生一条实线。

您可以通过将 background-color 更改为选择器中的其他内容来验证此行为。在下面的 sn-p 中，我将其设置为红色，以便您了解我的意思。

.post-title-line {
  background-color: red;
  background-image: -webkit-gradient(linear, left top, right top, from(#403a41), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  width: 100%;
  height: 1px;
  position: relative;
}

<div class="post-title-line"></div>

---

解决方案：

理想的解决方案是修改 mixin 代码，如下所示，只使用 background 属性。识别渐变的较新浏览器将覆盖第一个属性（纯色），而不能识别渐变的浏览器将继续使用它。

.horizontal-gradient (@startColor: #eee, @endColor: white) {
  background: @startColor;
  background: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(left, @startColor, @endColor);
  background: -moz-linear-gradient(left, @startColor, @endColor);
  background: -ms-linear-gradient(left, @startColor, @endColor);
  background: -o-linear-gradient(left, @startColor, @endColor);
}

如果您无法更改 mixin，您可以在调用 mixin 后覆盖 background-color（到 transparent）或将 endColor 颜色设置为 rgba(255,255,255,1)。

我会推荐前者，因为rgba(255,255,255,1) 等同于white，并且当您的页面背景不是白色而transparent and rgba(0,0,0,0) are the same as per W3C spec 时可能不适合。

请注意，此解决方案将对不支持渐变的旧浏览器的回退产生影响。他们只会看到一条实线。

.post-title-line {
  background-color: #403a41;
  background-image: -webkit-gradient(linear, left top, right top, from(#403a41), to(rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, #403a41, rgba(0, 0, 0, 0));
  width: 100%;
  height: 1px;
  position: relative;
  background-color: transparent; /* add this line after the mixin call */
}

<div class="post-title-line"></div>