1

CSS3を使用して色効果を作成するこのCodePen デモを見ました。同じプロパティを jsFiddle で試しましたが、この CSS3 プロパティは機能しませんでした。linear-gradientlinear-gradient

これがCodePen コードで、これが私のjsFiddle コードです。

これの背後にある問題は何か、またはjsFiddleの障害などがあることを誰かが説明できますか?

4

3 に答える 3

2

CodePenlinear-gradientで記述すると、コードに Web サイトのプレフィックスが自動的に追加されます (スクリーンショットを参照してください: Firebug の CodePen コード)。したがって、必要なプレフィックスは次のとおりです。

  • -webkitSafari、Chrome、Android ブラウザ、モバイル Safari 用
  • -mozFirefox 用
  • -oオペラ用
  • -msIE 10 以降の場合

コードを参照してください:ライブデモ

Firebug の Codepen サンプルコード

于 2012-11-25T10:26:30.963 に答える
2

colorzilla グラデーション ジェネレーターを使用してグラデーションを作成することをお勧めします。

http://www.colorzilla.com/gradient-editor/

すべてのブラウザーに適したコードを取得できます。要素 css の生成コードをコピーして貼り付けるだけです。

于 2012-11-25T10:34:47.570 に答える
1

インスペクターを見ると、そのような問題をすばやく簡単に解決するのに役立ちます。要素に適用される実際のスタイルは次のようになるため、CodePen にはある種の自動ベンダー プレフィックスがあるようです。 Webkit プレフィックス

jsFiddle サイトで同じことを行うと、プレフィックスが適用されていないため、プロパティ全体が機能していないことがわかります (警告サインと取り消し線で示されます)。

プレフィックスなし

必要なプレフィックス: -webkitSafari、Chrome、Android -mozの場合 Firefox -oの場合 Opera -msの場合 IE の場合

ブラウザーの互換性については、caniuseを参照してください。

これらのプレフィックスの処理は非常に面倒な作業になる可能性があるため、 lessや js ライブラリなどのプリプロセッサがその役割を果たしていることを確認する必要があります。

于 2012-11-25T10:34:53.053 に答える