线性渐变中的计算在 IE/Edge 中不起作用
calc in linear gradient does not work in IE/Edge
IE和Edge在这个渐变中似乎不能正确计算高度。有人有解决办法吗?
background: linear-gradient(180deg, rgba(255,255,255,0) 100px, #f5f5f5 100px, #f5f5f5 calc(100% - 100px), rgba(255,255,255,0) calc(100% - 100px));
在这种情况下,由于您使用的是透明 "stripe",您可以 作弊 通过使用 two 线性渐变只走高度的 50%。
你从顶部开始,第二个从底部开始
div {
height: 100vh;
background:
linear-gradient(180deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%),
linear-gradient(0deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%);
}
body {
margin: 0;
padding: 0;
background: pink; /* for demo purposes */
}
<div></div>
IE和Edge在这个渐变中似乎不能正确计算高度。有人有解决办法吗?
background: linear-gradient(180deg, rgba(255,255,255,0) 100px, #f5f5f5 100px, #f5f5f5 calc(100% - 100px), rgba(255,255,255,0) calc(100% - 100px));
在这种情况下,由于您使用的是透明 "stripe",您可以 作弊 通过使用 two 线性渐变只走高度的 50%。
你从顶部开始,第二个从底部开始
div {
height: 100vh;
background:
linear-gradient(180deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%),
linear-gradient(0deg, transparent 100px, #f5f5f5 100px, #f5f5f5 50%, transparent 50%);
}
body {
margin: 0;
padding: 0;
background: pink; /* for demo purposes */
}
<div></div>