2

同じDOM要素でレンダリングする2つの放射状グラデーションを取得しようとしていますが、結合ではなく2つのグラデーションの交差をレンダリングしているようです（これが私が望むものです）。

例： http： //jsfiddle.net/VUzLS/1/

時間を節約するために、オーバーラップがない場合、両方のグラデーションはレンダリングされません。交差がないため、何もレンダリングされません。

これで2つのグラデーションの結合をレンダリングする方法はありますか？

編集：これは私が欲しいものを説明するはずです。赤い楕円で定義されたグラデーションが白いセクション全体を占めるようにしたいのですが、現在は赤い楕円で定義された領域の交点のみを占めています。

4

1 に答える 1

0

これは、 CSS3グラデーションのかなり良い概要です

構文がかなりわかりにくく、何を達成しようとしているのかわかりません。

これは、他の css3 描画のアイデアを示すために、内側のボックス シャドウを使用してマルチカラーの放射状グラデーションを示す例の更新バージョンです。透明度には RGBA カラーを使用できます。

div {
  width: 90%;
  height: 500px;
  margin: 10px auto;
  background: -webkit-radial-gradient(center center, 30px 40px, red 10%, orange 40%, yellow 65%, brown 190%);  
  -webkit-box-shadow: inset -20px -20px 20px 20px orange, inset 20px 20px 20px 20px green;
  border-radius: 20%;
  }

おそらく、あなたはあなたの後の絵を描くことができます.

于 2012-01-19T00:05:09.947 に答える