問題タブ [radial-gradients]

ここに表示されている背景のグラデーションを自分のWebページに再現したいと思います。単純な線形グラデーションとは異なり、可変長を埋めることができるように、（画像として）繰り返してうまく機能しません。誰かが望ましい効果を達成するための方法をお勧めできますか？

次のスタイルをdiv要素に適用しています。

これには、目的の効果があります（の上部にのみ内側のドロップシャドウになりますdiv）。の下部にも同じ効果を適用したいと思いますdiv。次の行はうまくいきますが、最初の行を上書きしているように見えるので、どちらか一方しか取得できません。

要素ごとに複数の放射状グラデーションの背景を設定する方法を教えてもらえますか？webkitでこれを簡単に実行できることに気付きましたが、クロスブラウザーの実装/代替手段を探しています。

ありがとう

KineticJS で光源の効果を生成しようとしています。背景にさまざまなオブジェクトを配置し、放射状のグラデーション パターンで満たされた複数の低アルファ Rect オブジェクトのレイヤーを使用して、これを達成しようとしています。

かなり満足のいく効果で、グラデーションのパラメータをいじっていろいろな効果が出るように遊んでいます

問題は、これまで光源を 1 つしか取得できなかったことです。この光源の上に 2 つ目の Rect を配置すると、その背後にある光源の可視性が妨げられるためです。2つ以上の放射状グラデーションの結合を得るために実行できる、ある種の複合操作ジガリーポケリーがあると確信していますが、私自身の力ではあまり運がありませんでした. 助言がありますか？

画面サイズに合わせて調整される半径で、放射状のグラデーションの背景を持つシェイプ ドローアブルを作成しようとしています (関連ドキュメントを参照してください)。

これは私のコードです:

しかし、うまくいかないようです。「%p」を削除すると機能しますが、半径は静的になり、画面サイズに調整されません...何が問題なのですか?

SpreadプロパティをReflectまたはRepeatに設定して放射状グラデーションアルゴリズムを使用すると、バンドが近すぎるとお尻のモアレが狂ってしまいます。これは正常です。

私が理解しようとしているのは、これがどこで発生するかを理解する方法、またはこれを理解することが可能かどうかです。ある種の「明確な<->混乱した」値を決定できれば、それを重みとして使用して、特定のピクセルのグラデーションカラーとすべてのカラーの加重平均をブレンドし、モアレを軽減できます。

私はこれがかなりあいまいなトピックであることを知っています、そして多分これはもっと数学の質問です、しかし誰かが何か考えを持っていますか？

参考までに、私のアルゴリズムはこの実装に似ています。

これが私のコードが今与えるものです：

カイロで放射状グラデーションを使用していますが、期待した結果が得られません。私が取得している放射状のグラデーションは、予想よりもはるかに曖昧ではなく、目的の結果を得るためにカラー ストップをいじることができないようです。コードは次のとおりです。

これが私が話していることのイメージです。

白い円を繰り返さない方法はありますか？

http://dabblet.com/gist/3136266

あなたの助けのためのthx:)

私の Web ページには がbackground: grayあり、写真に示すような白い影の円を追加する必要があります。私の決定の 1 つは追加することurl:('../img/background.png') no-repeat grayですが、画像に垂直方向のグラデーションがあったため、色を接続できません。

CSS 3 を使用してこれを行うことは可能だと思いますよね?

RadialGradientBrush の使用は簡単で、中心の色を外側の色にマージできます。これは、Rectangle または Border の内部を塗りつぶすためのブラシとしてうまく機能します。そのブラシをペンのように適用する効果を実現し、それを Border.BorderBrush として適用したいと考えています。そのため、境界線の中心は暗くなり、境界線から離れるとフェードアウトします。

これを説明する別の方法は、Windows Vista または Windows 7 のトップ レベル ウィンドウの周りに表示される影です。ウィンドウの境界に近づくと影は暗くなり、ウィンドウから離れるほど影が薄くなります。同様の方法で Border を描きたいと思います。

現時点では、RadialGradientBrush または LinearGradientBrush を使用してこれを達成する方法を見つけることができません。きっとそれは可能でなければなりませんか？何か案は？

私のページでは、多くの CSS3 グラデーションを使用しています。IE と Opera に SVG フォールバックを提供したいと思います。

CSS3 線形グラデーションの SVG フォールバックを作成するのは非常に簡単です。次のコードを使用します。

これは、次の css と同等です。

CSS3 放射状グラデーションに関して言えば、状況は少し複雑になっています。次のようなCSS3ラジアルグラデーションに相当するSVGを作成する運がありません：

これまでのところ、私はこれを思い付くことができました：

しかし、それは私に異なる結果をもたらします。

CSS3 で元のグラデーションと同じグラデーションを作成するにはどうすればよいですか?

2 つのグラデーションのデモを次に示します: http://jsfiddle.net/QuMnA/