gpt4 book ai didi

css - 线性渐变中的计算在 IE/Edge 中不起作用

转载 作者:行者123 更新时间:2023-11-28 16:00:30 26 4
gpt4 key购买 nike

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));

最佳答案

在这种情况下,由于您使用的是透明“条纹”,您可以作弊使用两个线性渐变,两者都只达到高度的 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>

Codepen Demo

关于css - 线性渐变中的计算在 IE/Edge 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40236059/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com