如何使用CSS在项目数量上平均划分渐变颜色步骤

我的一位朋友让我创造一种菜单效果，其中每个菜单项的颜色都比它前面/上面的颜色柔和。下图描述了我想要实现的目标

写下我的目标：
我想有背景色不透明度从100%下降到50%，平均分配在菜单项的数量。如果有三个，则为100%-75%-50%。如果有8项，则为（100%-93,75%-87,5%等）。这只计入顶部菜单项，而不计入下级菜单项

---

我想我知道如何使用JS（

.length（）

）实现这一点，但我希望使用的是一种仅限于CSS的技术。如果这是不可能的，那么JS就是最好的选择。

您可以为“ul”创建渐变背景，将li背景设置为透明、边框底部和顶部白色。 例如：

ul{
显示：块；
宽度：90%；
身高：100%；
保证金：0；
填充：0；
列表样式：无；
背景：线性梯度（#fff，#00ff0c）；
}
李{
宽度：100%；
边框底部：10px实心#fff；
边框顶部：10px实心#fff；
文本对齐：居中；
}

AAAA
BBBB
中交
DDDD

我想你可以创建一些LESS或SASS混入

循环来实现这一点。@Heidel:LESS或SASS不知道HTML中存在的元素数。用户仍然需要输入一个固定的数字并生成尽可能多的类/n-*选择器。当编译时元素数量为动态/未知时，JS是最佳选择。这不是一个坏选项，但取决于页面背景也是纯色（而不是图像或渐变色）。只需查看我的代码片段：）。背景：线性梯度（#fff，#00ff0c）；//没有坚实的背景。完全可编辑的JS。这肯定是一个选项，但不完全是我想要的。我希望每个菜单项是一个平面的颜色，而不是梯度。如果你仔细观察你建议的每个菜单项，每个菜单项都有一个轻微的渐变。尤其是在AAAA，顶部几乎是白色，但底部仍然是浅绿色。建议仍然是+1@SkyWookie我说的是页面背景。如果页面有一个图像作为背景，那么白色边框将显示为白色区域，而不显示图像。哦，Harry的意思是，如果菜单后面有一个图像，你将看不到，因为两者之间的空间被白色覆盖，而不是透明。很高兴菜单后面不会有图像，所以我不认为这是一个问题=）-哦，我看到哈里再次评论，并解释了它