线性渐变css3

Question

我想要一个包含页面 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%;
}

Answer 1

您的语法不正确。 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%;
}

<hr />

Answer 2

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%;
}

<hr>

线性渐变css3

Linear gradient css3

css

gradient

linear-gradients