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

Question

Dunno当视口宽度至少为1000px时，为什么我会在第一个矩形的底部移动线性渐变。

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）差异会根据屏幕大小而变化