Tailwind CSS中单个Div无法应用两个线性渐变的问题求助

问题分析 #

你的代码存在几个关键问题，导致无法复现设计效果：

• 渐变参数逻辑错误：第一个深色渐变的色标百分比顺序颠倒，to bottom方向下色标应从小到大排列；第二个白色渐变的色标逻辑错误，且未使用透明色收尾。
• 渐变层级顺序错误：多层渐变的绘制顺序是先写的在上层，你需要将白色渐变放在上层作为遮罩，深色渐变放在下层。
• 多余样式干扰：bg-gray-700会覆盖渐变背景，必须移除。
• CSS语法不规范：自定义括号内的CSS值需与标准写法一致，下划线要替换为空格（如to_bottom→to bottom）。

修复后的代码 #

<div
  className='[background-image:linear-gradient(to bottom,#ffffff 24%,transparent 0%),linear-gradient(to bottom,#212639 25%,#062142 100%)]
  flex justify-center items-center rounded-[16px] w-16 h-16 shadow-card-a'
>
  <Image src={DeltaTestLogoIcon} alt='logo of delta test icon' />
</div>

关键调整说明 #

1. 白色渐变改为linear-gradient(to bottom,#ffffff 24%,transparent 0%)：让元素顶部24%高度显示白色，下方直接透明，刚好衔接下层深色渐变的起始位置。
2. 深色渐变调整为linear-gradient(to bottom,#212639 25%,#062142 100%)：从上到下从#212639平滑过渡到#062142，起始位置25%避开白色区域。
3. 用w-16 h-16替代冗余的尺寸限制类，简洁固定元素大小。

内容的提问来源于stack exchange，提问作者Abdullah Ahmad