sticky border

yyzyyzyyz / 2024-10-18 / 原文

在CSS中,使用position: sticky;进行粘性定位时,‌border样式可以正常应用‌。然而,如果在粘性定位的元素上设置border边框,并在页面滚动过程中发现样式表现不符合预期,可以考虑使用outline(轮廓)替代border,以达到想要的样式效果。outline不占据空间,绘制于元素内容周围,可以设置轮廓的颜色、宽度和样式。

例如,对于table的thead部分,可以这样设置:

css
Copy Code
table thead tr {
border: none;
outline-color: #fff;
outline-style: solid;
outline-width: 1px;
}


这样,即使在滚动过程中,样式也能保持预期的效果‌
1