Css 仅顶部、底部和左侧的框阴影

我想添加框阴影只是顶部，底部和左侧只-没有右侧

这是我的CSS类：

.topBottomLeft{
      box-shadow: inset -1px 0px 0.5px 0.5px #000,inset 0 1px 0.5px 0.5px #000,inset 0 -1px 0.5px 0.5px #000 !important;
}

这是我的JSFIDLE：

---

但是，它将长方体阴影应用于所有四个面。我遗漏了什么？

您即将找到解决方案。您只需要稍微调整一下值

这里是一个使用您的方法的工作示例，添加了一些重点，以便您可以看到我所做的更改

    box-shadow: inset 0 5px 0.5px 0.5px #000,
    inset 0 -5px 0.5px 0.5px #000,
    inset  5px 0.5px 0.5px #000;

---

对于将来的着色，我建议这样做：

您很接近解决方案。您只需要稍微调整一下值

这里是一个使用您的方法的工作示例，添加了一些重点，以便您可以看到我所做的更改

    box-shadow: inset 0 5px 0.5px 0.5px #000,
    inset 0 -5px 0.5px 0.5px #000,
    inset  5px 0.5px 0.5px #000;

---

对于将来的着色，我建议这样做：

第一个插入值应该是1，而不是-1

.topBottomLeft {
    box-shadow: inset 1px 0px 0.5px 0.5px #000,inset 0 1px 0.5px 0.5px #000,inset 0 -1px 0.5px 0.5px #000;
}

---

第一个插入值应为1而不是-1

.topBottomLeft {
    box-shadow: inset 1px 0px 0.5px 0.5px #000,inset 0 1px 0.5px 0.5px #000,inset 0 -1px 0.5px 0.5px #000;
}

---

该属性实际上不是这样工作的。最好使用伪元素将插入阴影（具有扩展半径）仅添加到三个面。该属性不是这样工作的。最好使用伪元素添加插入阴影（具有扩展半径）只有三个面。右侧仍然会有一个小阴影（至少在Chrome上）。使用负值，例如“inset 4px 0 0.5px-2px#000”。但是厚度将与OP预期的厚度不同。我会让OP决定：）OP使用1px厚度。如果是这样，我会使用

border:1px solid#000；边框宽度：1px 0 1px 1px；框大小：边框框border:1px solid#000；边框宽度：1px 0 1px 1px；框大小：边框框