当前位置：文江博客话题详情

CSS 径向渐变与交集的并集

发布于 2024-12-27 15:53:47 字数 371 浏览 1 评论 0原文

我试图让两个径向渐变在同一个 DOM 元素上渲染，但看起来它们正在渲染两个渐变的交集而不是并集（这就是我想要的）。

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

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

有没有办法让这个渲染两个渐变的并集？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

惯饮孤独 2025-01-03 15:53:47

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

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

Here is a pretty good overview of css3 gradients

I find the syntax pretty confusing and am not sure what you are trying to accomplish.

Here is an updated version of your example that shows multi-color radial gradients with an inner box shadow to show some other css3 drawing ideas. You can use rgba colors for transparency.

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

perhaps you could draw a picture of what your after.

回复收藏 0 原文

~没有更多了~