0

我正在尝试对块进行渐变。

代码：

a {
      display: inline-block;
      box-sizing: border-box;
      width: 330px;
      height: 160px
      background: -moz-linear-gradient(top, #fdfdfd 0%,#fcfcfc 100%);
      background: -webkit-linear-gradient(top, #fdfdfd 0%,#fcfcfc 100%);
      background: linear-gradient(to bottom, #fdfdfd 0%,#fcfcfc 100%);
}

它在 chrome 27、ff 22 中运行良好，但在 safari 6 中我中间有奇怪的线条。

我知道，那个 safari 只支持-webkit-linear-gradient，但它对我来说很奇怪。

还可以找到 -webkit-mask-image，但不确定是否会有所帮助。

小提琴

有任何想法吗？

带有奇怪线条的屏幕截图

4

1 回答 1

0

Safari 和旧版本的 Chrome 在显示具有非常相似颜色的渐变时出现问题，我建议切换到 SVG 渐变。在此过程中，您将获得 IE 9 支持。不幸的是，语法不是很好：

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRkRGREZEIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkNGQ0ZDIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNzYpIiAvPgo8L3N2Zz4=);

http://jsfiddle.net/82D7g/

如果要调整渐变，可以使用 Microsoft 的 SVG 渐变生成器：http: //ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/

于 2013-07-10T14:15:39.420 回答