线性渐变css3答案

【问题标题】：Linear gradient css3线性渐变css3
【发布时间】：2015-01-01 06:53:01
【问题描述】：

我想要一个包含 50% 页面的 hr。我正在为此尝试遵循 css 代码。但它不起作用。

请帮忙。

hr {
    background-color: @border;
    background-image:      -moz-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
    background-image:   -webkit-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
    background-image:        -o-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
    background-image:           linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);

    border: none;
    margin: 1.5em auto;
    height: 1px;
    width: 50%;
}

【问题讨论】：

什么是background-color: @border;？你是从预处理器中移植一些代码吗？

标签： css gradient linear-gradients

【解决方案1】：

background-color: @border; 是无效的 CSS。我猜你正在从预处理器（例如 SASS）中移植一些代码，请修复它。

你的语法错误：

/* incorrect */
-webkit-linear-gradient: (left, white 0%, #E0DFDF 50%, white 100%);
                       ^^
/* correct */
-webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);

这是一个演示：

hr {
  background-image: -moz-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
  background-image: -webkit-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
  background-image: -o-linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
  background-image: linear-gradient(left, white 0%, #E0DFDF 50%, white 100%);
  border: none;
  margin: 1.5em auto;
  height: 1px;
  width: 50%;
}

&lt;hr&gt;

【讨论】：

【解决方案2】：

您的语法不正确。 linear-gradient: (...) 应该是 ---> linear-gradient(...)，没有分号 (:)。

hr {
  background: -webkit-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
  background: -moz-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
  background: -o-linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
  background: linear-gradient(to right, white 0%, #E0DFDF 50%, white 100%);
  border: 0;
  margin: 1.5em auto;
  height: 1px;
  width: 50%;
}

&lt;hr /&gt;

【讨论】：

@Harry - 真的！我忘了提。