Css 当元素高度超过32000像素时，背景渐变在Chrome中中断

我有一个例子，允许用户查看通常分页的表的全部内容，在极少数情况下，元素变得非常长。在Chrome中，当元素的高度超过32000像素时，背景渐变会分离，呈现为纯黑色和其他各种块

---

我看到了2011年类似的讨论，但这似乎有所不同

好吧，这有点奇怪，显然是Chrome中的一个bug

如果从样式中删除边框，效果会非常好：

}

要获得渐变和边框，也可以使用方框阴影：

.gradient-tall {
    width: 150px;
    height: 35000px;
    display: inline-block;
    box-shadow:0 0 0 1px #777;
    background:#ccc;
    background-image:-webkit-linear-gradient(#ccc 1%, #f5f5f5 99%);
    vertical-align: top;
}

---

非常有趣。在我的例子中，它也修复了梯度。我将尝试将背景放在子元素上。您也可以使用框阴影创建各种假边框。将其添加到答案中。+1表示找到解决方案。如果您需要边框，您可以尝试使用

outline

；这似乎在

border

不起作用的地方起作用（我只是在小提琴上签了名，没关系）<代码>框阴影也可能是一个选项，尽管它比

大纲

更复杂。或者，使用

：before

或

：after

选择器为您的

边框创建一个伪元素。请注意，与边框不同，轮廓和框阴影不会以任何方式影响框大小和布局，这可能会也可能不会有问题。不幸的是，我的元素已经有框阴影。然而，我成功地将背景渐变放置在子元素上。谢谢你的侦查！
.gradient-tall {
width: 150px;
height: 35000px;
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#f5f5f5));
vertical-align: top;

.gradient-tall {
    width: 150px;
    height: 35000px;
    display: inline-block;
    box-shadow:0 0 0 1px #777;
    background:#ccc;
    background-image:-webkit-linear-gradient(#ccc 1%, #f5f5f5 99%);
    vertical-align: top;
}