需要帮助制作 CSS 径向渐变，使其无缝地流过两个高度或宽度不同的元素
http://jsfiddle.net/nicktheandroid/F8v2c/3/
我正在尝试制作一个在 2 个兄弟元素之间无缝流动的径向渐变 - 从按钮右侧的 10px 或 20px 开始，向下流过“.content”div 的大约一半。
我相信这只需正确定位两个元素的渐变，这样它看起来就像一个流动的径向渐变，这就是问题，我一直在尝试这样做，但我变得沮丧 - 答案可能会帮助其他人。
菜单后面有一个背景，所以我不能简单地“涂白”下图中“功能”旁边的部分 - 请参阅 jsfiddle。
例如，请参见图片。
http://jsfiddle.net/nicktheandroid/F8v2c/3/
I'm trying to make a radial gradient that flows seamlessly between 2 sibling elements - starting from 10px or 20px to the right of the button, flowing down about half way down through the ".content" div.
I believe this just takes correctly positioning the gradients for both elements so it looks like it's one flowing radial gradient, that's the problem, I've been trying to do this but I've become frustrated - and the answer might help others.
There's a background behind the menu, so I cannot simple 'white-out' the portion next to "features" in the image below - see the jsfiddle.
See image for example.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我已经在 http://jsfiddle.net/F8v2c/9/
要计算出位置，您需要在按钮上设置高度，然后您就知道渐变的偏移量。在按钮上我们有：
所以我们知道盒子的总高度是 41px
（21px高度+10px顶部内边距+10px底部内边距）
因此，为了使渐变中心位于按钮下方10px处，我们将使用51px作为垂直位置，水平位置只要按钮和下拉菜单上的内容相同。除非按钮和下拉菜单的大小相同，否则百分比将不起作用，因此我们将以像素 (300px) 为单位设置圆圈的大小。
在下拉菜单中，CSS 几乎相同，只是渐变中心距离底部 10 像素，而距离顶部 10 像素。
I've posted a quick update to your jsfiddle at http://jsfiddle.net/F8v2c/9/
To work out the position you need to set a height on the button, then you know how much to offset the gradient by. On the button we have:
So we know the total height of the box is 41px
(21px height +10px top padding +10px bottom padding)
So to have the centre of the gradient 10px below the button we would use 51px for the vertical position, the horizontal doesn't matter as long as it is the same on both the button and the dropdown. Unless the button and dropdown are the same size percentages will not work, so we will set the size of the circle in pixels (300px).
On the drop-down the css is almost the same except instead of the centre of the gradient being 10px below the bottom it is 10px from the top.