CSS徑向漸變與交叉點的聯合

Question

我想要獲得兩個徑向漸變渲染到相同的DOM元素上，但它似乎是渲染兩個漸變而不是聯合的交集（這是我想要的）。

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

爲了節省您的時間，如果沒有重疊，它不會使這兩個梯度，因爲沒有交集會呈現什麼。

有沒有辦法讓這個呈現兩個漸變的聯合？

編輯：This應該說明我想要什麼。我希望由紅色橢圓定義的漸變佔據整個白色部分，但現在它們只佔據由紅色橢圓定義的區域的交集。

Answer 1

這裏是css3 gradients

一個很好的概述，我覺得語法很混亂，我不知道你要完成的任務。

這是您的示例的更新版本，顯示帶有內框陰影的多色徑向漸變以顯示其他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%; 
    } 

也許你可以畫出你以後的照片。