http://jsfiddle.net/nicktheandroid/F8v2c/3/
我正在尝试制作一个在 2 个兄弟元素之间无缝流动的径向渐变 - 从按钮右侧的 10px 或 20px 开始，向下流过“.content” div 的一半左右。
我相信这只需要正确定位两个元素的渐变，因此它看起来像是一个流动的径向渐变，这就是问题所在，我一直在尝试这样做，但我变得沮丧 - 答案可能对其他人有所帮助。
菜单后面有一个背景，所以我不能简单地“白化”下图中“功能”旁边的部分 - 请参阅 jsfiddle。
例如，请参见图像。
我已经在http://jsfiddle.net/F8v2c/9/上发布了对您的 jsfiddle 的快速更新
要计算出您需要在按钮上设置高度的位置，那么您就知道要偏移多少渐变。在按钮上，我们有：
padding:10px;
height:21px;
所以我们知道盒子的总高度是 41px
（21px 高度 +10px 顶部填充 +10px 底部填充）
因此，要让渐变的中心在按钮下方 10 像素，我们将使用 51 像素作为垂直位置，只要按钮和下拉菜单上的水平相同，就可以了。除非按钮和下拉菜单的大小相同，否则百分比将不起作用，因此我们将以像素（300px）为单位设置圆的大小。
background-image: radial-gradient( 74px 51px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);
在下拉菜单中，css 几乎相同，只是渐变的中心不是在底部下方 10 像素，而是在顶部 10 像素。
background-image: radial-gradient( 74px 10px, circle closest-side, rgba(171, 171, 171, 1), #0000ff 300px);