css - CSS径向渐变与交点的联合

Question

我试图让两个径向渐变渲染在同一个 DOM 元素上，但似乎它们渲染的是两个渐变的交集而不是联合（这是我想要的）。

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

为了节省一些时间，如果没有重叠，它不会渲染两个渐变，它不会渲染任何东西，因为没有交集。

有没有办法让这呈现两个渐变的联合？

编辑：这应该说明我想要什么。我希望红色椭圆定义的渐变占据整个白色部分，但现在它们只占据红色椭圆定义的区域的交集。

Answer 1

这是对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%;
  }

也许你可以画出你的追求。