事实证明,您可以在<td>
元素上使用 css 选择器来执行此操作,但要小心两端。例如,我创建了以下手写笔代码,可以将其转换为 mixin。诀窍是使用负值spread
来消除将出现在您不想要的任何一侧的边框,同时使用blur
和水平/垂直值在您想要的一侧获得良好的效果。blur
最多只能是 的一半spread
。
shadow-color = rgba(0,0,0,0.5)
shadow = 15px
-shadow = - shadow
blur = 5px
spread = -10px
tr.selected > td
box-shadow:
0 shadow blur spread shadow-color inset,
0 -shadow blur spread shadow-color inset
// Since we have to, make the top left and bottom right corners the dark overlapping ones
tr.selected > td:first-child
box-shadow:
shadow -shadow blur spread shadow-color inset,
0 shadow blur spread shadow-color inset
tr.selected > td:last-child
box-shadow:
0 -shadow blur spread shadow-color inset,
-shadow shadow blur spread shadow-color inset
这将创建如下阴影边框,允许任何背景颜色仍然显示:
但是,不可能使用普通(非插入)框阴影来执行此操作,因为它们会显示在表格单元格之间。