web-dev-qa-db-ja.com

Chromeで線形勾配が機能しない

かなりの量の検索を行った後、Firefoxでは機能しますがChromeでは機能しない線形グラデーションに悩まされています。

追加した -webkit- 1つの参考文献に記載されている線形グラデーションの前に、それでも機能しない問題は、グラデーション軸にあると思います

私のコード

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

任意のヒント/提案は素晴らしいことでしょう。前もって感謝します。

cssgoogle-chromelinear-gradients
11
Raj

まず最初に、_-webkit-gradient_はAppleによって意図され、2008年にWebkitベースのWebブラウザー（Safari 4など）で実装され、W3C標準とはかなり異なる構文を持っている）ことに注意してください。

_-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
_

例えば：

_background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
_

これがあなたのケースでそれを機能させることができなかった理由です。

1年後、Mozillaは_-moz-linear-gradient_（Firefox 3.6以降）を導入しました。これも、古いWebkitバージョンとは構文が異なりますが、_-webkit-linear-gradient_でWebkitに実装されています。

_-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)
_

ただし、_linear-gradient_のW3C標準バージョンは静かに異なり、 linear-gradient() 式の正式な構文は次のとおりです。

_linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]
_

投稿されたコードからわかるように、もう1つの間違いは、W3Cバージョンに_to <side>_がないことです。したがって、あなたの場合、それは次のようになります：

ここに例。

_background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%,#fff), color-stop(100%,transparent)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* Chrome10+, Safari5.1+ */
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);    /* FF3.6+ */
background: linear-gradient(to left, transparent 0%,#fff 50%,transparent 100%);      /* W3C */
_
19
Hashem Qolami

使用する

background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);

mozillaと同様の定義として。

1
podwysoc