Question

我想要一个包含50％页面的小时。我正在尝试遵循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: (...)应该是---＆gt; 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%);

这是一个演示：

＆＃13;

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

＆＃13;

<hr>

＆＃13;

线性渐变css3

2 个答案: