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%;
  }

也许你可以画一幅你的照片。

CSS径向渐变与交叉的联合

1 个答案: