经过大量搜索之后,我陷入了线性渐变,它适用于Firefox,但不适用于Chrome。线性渐变不适用于Chrome
我线性渐变前加入-webkit-
作为一个参考,但仍无法正常工作,我认为这个问题是在梯度轴上
我的代码
<nav class="top_menu">
<ul class="black_high">
<li class="first active"> <a href="#">Home</a>
</li>
<li> <a href="#">news</a>
</li>
</ul>
</nav>
.top_menu ul li.active a::after {
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
height: 2px;
transform:none;
content: '';
opacity: 1;
background: #fff;
background: linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
background: -webkit-gradient(left, transparent 0%,#fff 50%,transparent 100%);
}
这里创建一个小提琴 - http://jsfiddle.net/h2zu5xx2/4/
任何提示/建议都会很好。提前致谢。
您的webkit渐变的css是错误的。无效的属性,如果你看它,所以语法是错误的。你有没有从诸如chrome开发工具之类的检查器中查看它,你可以很容易地发现它。 – Dorvalla 2014-10-11 20:35:09
@Hashem我无法评论你的答案,也无法再看到它。但我想非常感谢你指出我的错误和这个辉煌的解释。 – Raj 2014-10-11 20:55:56