两侧大小不同的盒子阴影

Question

我有一个使用box-shadow CSS 属性的<div>，四周都有边框。 目前阴影的厚度在所有边都是 5px。但我需要这些边框的顶部和底部厚度为 5px，左右两侧为 10px。

我知道使用border-left,boder-right,border-top,border-bottom 可以做到这一点。 但我需要找到一个解决方案来仅使用box-shadow。

有可能吗？

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: inset 0px 0px 0px 5px #888888;
}

<div></div>

Answer 1

您可以通过使用多个逗号分隔的值定义来实现：

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: inset 0px 5px 0px 0px #888888, inset -20px 0px 0px 0px #ff0000, inset 0px -15px 0px 0px #00ff00, inset 20px 0px 0px 0px #0000ff;
}

<div></div>

Answer 2

使用多个 box-shadow 值。

div {
  box-shadow: inset 10px 0px 0px #888888,
              inset -10px 0px 0px #888888,
              inset 0 5px 0px #888888,
              inset 0 -5px 0px #888888;
}

更改 x 和 y 因子以增加/减少每侧阴影（边框）的厚度。

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: inset 10px 0px 0px #888888,inset -10px 0px 0px #888888, inset 0 5px 0px #888888, inset 0 -5px 0px #888888;
}

<div></div>

Answer 3

你可以试试这个：

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: inset 10px 0px 0px 5px #888888,inset -10px 0px 0px 5px #888888
}