html - 如何隐藏已设置滚动滚动的父级的边框半径？

父级的border-radius为5px。子级（顶部黑色部分）的border-radius为3px。这使得父母的边界被孩子们的

但是，我需要使用户能够滚动父级的内容，但为此，我必须将父级设置为overflow: scroll

但这使父母的边框再次出现（左上方的白色）：



如何启用滚动功能并同时隐藏父级的边框半径？

这是JSFiddle：https://jsfiddle.net/qjog7tvu/

最佳答案

最初将child的border-radius设置为5px，然后当用户滚动后开始滚动时，直到标题使用jquery将border-radius更改为3px

$(document).ready(function(){
   var headerHeight = $('header').height()
   $('article[_v-e514def2]').scrollTop(headerHeight);
   $('header').css('border-radius','3px');
})

据我所知，这是唯一的解决方案，因为如果有父级的5px边界半径和子级的3px边界，那么自然会有2px的空间，因此最好的办法是动态更改它。