CSS box-shadow在Safari(iOS16.1.1)表格行中失效，求解决方法

我定义了如下CSS样式：

.highlight {
     box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5); 
}

该样式在**Safari(iOS 16.1.1)**的表格行（<tr>）上不生效，但在Chrome 107和Edge 107中可正常显示。

已尝试的操作：

• 将样式应用于表格单元格（包括<td>及设置display:table-cell的元素）时，在Safari中能正常生效。
• 添加-webkit-appearance: none;属性，未解决问题。

求可行解决方案？

方案1：修改<tr>的display属性 #

Safari对默认display: table-row的元素不支持box-shadow，可修改其display值：

.highlight {
     display: block;
     box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
     width: 100%;
     box-sizing: border-box;
}

如果设置block导致表格布局错乱，可改用display: table-row-group，或调整margin、padding适配原有布局。

方案2：通过单元格拼接阴影 #

利用<td>支持阴影的特性，给该行所有单元格设置对应位置的阴影，模拟整行效果：

.highlight td:first-child {
     box-shadow: -10px 0 10px -5px rgba(0,0,0,0.5), 0 0 10px 5px rgba(0,0,0,0.5), 0 -10px 10px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.5);
     -webkit-box-shadow: -10px 0 10px -5px rgba(0,0,0,0.5), 0 0 10px 5px rgba(0,0,0,0.5), 0 -10px 10px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.5);
}
.highlight td:not(:first-child):not(:last-child) {
     box-shadow: 0 0 10px 5px rgba(0,0,0,0.5), 0 -10px 10px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 0 10px 5px rgba(0,0,0,0.5), 0 -10px 10px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.5);
}
.highlight td:last-child {
     box-shadow: 10px 0 10px -5px rgba(0,0,0,0.5), 0 0 10px 5px rgba(0,0,0,0.5), 0 -10px 10px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.5);
     -webkit-box-shadow: 10px 0 10px -5px rgba(0,0,0,0.5), 0 0 10px 5px rgba(0,0,0,0.5), 0 -10px 10px -5px rgba(0,0,0,0.5), 0 10px 10px -5px rgba(0,0,0,0.5);
}

此方法不会破坏表格原生布局，视觉效果和整行阴影一致。

方案3：用伪元素模拟阴影 #

给<tr>设置相对定位，通过伪元素生成阴影层：

.highlight {
     position: relative;
}
.highlight::after {
     content: '';
     position: absolute;
     top: -5px;
     left: -5px;
     right: -5px;
     bottom: -5px;
     box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.5);
     z-index: -1;
}

注意：需确保<tr>的父元素未设置overflow: hidden，否则阴影会被裁剪。

内容的提问来源于stack exchange，提问作者Phil_Libra