Html 一个方向上的长方体阴影和与兄弟元素无缝配合的模糊

我有一个带有sticky标题的HTML表，其中sticky属性设置在

th

元素上

我想应用带有模糊的

框阴影

，但这样做会导致阴影在每个元素的侧面泄漏/出血

我已经创建了一个示例来演示问题，并且在元素下面可以看到所需的阴影

我尝试过添加一个扩展参数，如

box shadow:0px 5px 7px rgba（9,30,66,0.08），这将解决侧面阴影的问题，但会导致阴影在其下方彼此分离


是否可以创建一个只指向下方向的
框阴影
，并且与同级框阴影无缝？
因为无法应用
位置：粘滞
到
thead
或
tr
您的最佳选择是通过使用绝对定位的伪元素+
线性渐变
在
th
元素上伪造
box shadow
。下面是一个例子：


表格{
文本对齐：左对齐；
位置：相对位置；
边界塌陷：塌陷；
}
th，td{
填充：0.25rem；
}
th{
背景：白色；
位置：粘性；
排名：0；
}
赛后{
内容：''；
位置：绝对位置；
底部：-6px；
右：0；
左：0；
高度：6px；
背景：线性梯度（rgba（0,0,0,0.15），rgba（0,0,0,0））；
}

名称
年龄
工作
颜色
统一资源定位地址
洛雷姆。
乌兰。
威尔。
在
奎斯。
卡斯！
维利特。
奎斯夸姆？
雷拉姆？
尤斯托？
胡说八道！
福吉亚？
别名
多洛里巴斯。
真理。
马约雷斯。
Ab。
Accusantium。
乌兰！
埃维尼特。
嗯。
身份证件
官员。
莫迪！
大盲肠。
索拉塔。
公元
阻止它。
别名
公元
快车。
现状。
实习他们！
选择权？
乱数假文？
指挥官！
雷姆。
阿斯珀纳图尔。
Accusantium！
马约雷斯。
奥姆尼斯。
卡姆克？
伊万尼特！
莫莉塔？
维罗。
错误！
发明者。
准！
杜西莫斯。
海豹科！
多洛雷斯！
公共汽车。
腐败！
欧洲博物馆。
桑特！
Ea。
罪过？
夸姆？
尼莫！
坐下！
真理！
面部。
速递员？
伊萨姆！
奥姆尼斯！
维泰。
卡姆克。
海豹科。
美国犹他州？
塞德！
Accusantium。
阿迪皮西。
坐。
马克西姆。
哈勒姆。
奎！
Accusamus？
最小值？
多洛伦。
鼹鼠科。
维罗！
Voluptatum？
Ea？
奥迪！
A.
借方炎。
维尼安。
福加。
别名
山猫科！
光碟！
多洛伦。
埃尼姆。
智者！
苏西比特？
康斯昆图尔。
多洛雷姆格。
照明！
伊斯特！
辛特！
面部。
错误。
福吉亚。
在
莫迪？
沃鲁帕提布斯！
别名
埃克。
附有。
杜西莫斯！
尼希尔。
埃尼姆。
伊勒姆？
诺比斯？
埃维尼特。
嗯！
身份证件
鼹鼠科。
维利特。
最低限度。
智者？
内克。
大盲肠！
埃勒姆。
埃塞。
南？
伊萨姆！
有远见的
乌兰。
码头？
艾米特！
在里面
官员！
纳图斯？
临时的？
消费习惯。
嗯。
官员。
意大利？
准。
埃尼姆。
特尼图尔。
Asperiores？
Eos！
自由人。
实习。
奎登！
比泰？
阿迪皮西？
Accusamus。
奥姆尼斯。
Accusamus？
埃尤斯！
山猫科！
多洛。
马格尼。
临时的！
奥迪奥！
奥迪！
Voluptatum？
欧洲博物馆。
硬树脂！
劳尔。
别名
福加。
奎亚！
奎斯。
内克？
伊洛。
公元
官员。
实习他们！
阿迪皮西？
官员？
在里面
呕吐物？
Voluptatum。
尼希尔。
托塔姆？
奎斯夸姆！
索拉塔。
暂时的！
铜酸盐。
比泰。
透视术。
波罗。
官员？
错误。
罪过？
福吉特。
Et？
尼莫。
尼西？
托塔姆！
呕吐。
塞佩？
维罗。
艾米特？
伊洛！
拉布拉姆！
阿特克！
特尼图尔。
选择权。
尤尔。
波罗。
阿特克。
别名
多洛雷姆格。
维利特。
罪过。
地点？
公共汽车。
加油！
可能。
南？
照明！
奎。
快车！
奥姆尼斯。
南。
康斯昆特！
圣骑士！
有远见的
康斯昆特！
区别。
光碟！
沃鲁帕特姆。
铜酸盐！
奎。
镨。
可能吗？
魁。
康斯昆图尔。
德莱尼蒂。
沃卢帕斯。
嗯？
Ab。
Asperiores？
奥姆尼斯。
硬树脂！
铜酸盐。
维利特。
自由人。
伊斯特。
格言？
消费！
诺比斯。
光碟！
奥迪奥。
尼莫！
多洛雷姆。
区别？
有远见的
尼西！
是吗？
Accusantium？
Ea。
多洛里巴斯。
诺比斯。
马克西姆？
鼹鼠科。
雷？
埃尼姆！
马克西姆？
雷西恩迪斯！
康莫迪。
在
伊勒姆？
福吉特。
马克西姆？
Eligendi？
Q