线性渐变css3

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

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

2. 你的语法是错误的：

   /* 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>

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

<hr />