css - 需要帮助制作一个 CSS 径向渐变，它无缝地流过 2 个高度或宽度不同的元素

Question

http://jsfiddle.net/nicktheandroid/F8v2c/3/

我正在尝试制作一个在两个同级元素之间无缝流动的径向渐变 - 从按钮右侧的 10px 或 20px 开始，向下流动大约一半通过“.content”div。

我相信这只是需要正确定位两个元素的渐变，所以它看起来像是一个流动的径向渐变，这就是问题所在，我一直在尝试这样做，但我变得很沮丧 - 答案可能会帮助其他人.

菜单后面有背景，所以我不能简单地“抹掉”下图中“功能”旁边的部分 - 请参阅 jsfiddle。

例如看图片。

Answer 1

我已经在 http://jsfiddle.net/F8v2c/9/ 发布了对您的 jsfiddle 的快速更新

---

要计算出您需要在按钮上设置高度的位置，然后您就知道要将渐变偏移多少。在按钮上我们有:

padding:10px;
height:21px;

所以我们知道盒子的总高度是41px
(21px 高度 +10px 顶部填充 +10px 底部填充)

因此，为了让渐变的中心在按钮下方 10px 处，我们将使用 51px 作为垂直位置，水平并不重要，只要按钮和下拉菜单上的水平相同即可。除非按钮和下拉菜单的大小相同，否则百分比将不起作用，因此我们将以像素 (300px) 为单位设置圆圈的大小。

background-image: radial-gradient( 74px 51px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);

在下拉菜单中，CSS 几乎相同，除了渐变中心不是底部下方 10px，而是距离顶部 10px。

background-image: radial-gradient( 74px 10px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);