html - 在更宽的屏幕上在 flexbox 中移动线性渐变

Question

不知道当视口(viewport)的宽度至少为 1000 像素时，为什么我会在第一个矩形的底部得到偏移的线性渐变。

fiddle

渐变:

.hero:before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 5px;
    left: 0;
    border-radius: 10px;
    background: linear-gradient(rgba(0,0,0,0) 65%, rgb(93, 240, 255) 120%);
}

Answer 1

与线性渐变或类似的东西无关，顶部两个元素的宽度与底部三个元素的宽度不同(520 + 255 = 775 vs 255 + 255 + 255 = 765)。然后您使用带有 % 值的 calc，因此实际的 (px) 差异会根据屏幕尺寸发生变化