具有淡出效果的水平线

Question

我正在尝试用像这样的渐变线替换 bootstrap <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);
}

但是……没用。

编辑

我决定创建一个单独的 class（<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 更改为选择器中的其他内容来验证此行为。在下面的代码片段中，我将其设置为红色，以便您明白我的意思。

.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>

解法：

理想的解决方案 是像下面给出的那样修改混合代码，只使用 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);
}

如果您无法更改混入，您可以在调用混入后覆盖 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>

具有淡出效果的水平线

Horizontal line with fade out effect

css

linear-gradients

less