html - 两边大小不同的盒子阴影

Question

我有一个 <div>使用 box-shadow 四周有边框CSS 属性。 目前阴影的厚度在所有方面都是 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

使用多个 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>