html - 如何在没有任何渐变的情况下完全围绕元素制作盒子阴影？

Question

下面是我的按钮代码。我想使用框阴影来创建按钮的第二个边框，而不是将其包裹在某些东西中。这样做的原因是给我更多的选择来改变它的外观。

现在我可以使用类似的东西box-shadow: 0 0 5px #EEE;或box-shadow: 5px 5px 0 #EEE, -5px -5px 0 #EEE;创建第二个边框。

除了第一个当然有渐变，第二个在左下角和右上角有一个间隙。如何为我想要的效果创建没有间隙或没有渐变？

button {
  border: 1px solid #CCC;
  border-bottom: 1px solid #BBB;
  background: linear-gradient(#FFF, #EEE);
  box-shadow: 5px 5px 0 #EEE, -5px -5px #EEE;
  width: 150px;
  padding: 5px;
  margin: 5px;
}

Answer 1

您可以只使用一个没有偏移且散布半径为 5px 的阴影，而不是创建多个偏移的盒子阴影：

button {
  border: 1px solid #CCC;
  border-bottom: 1px solid #BBB;
  background: linear-gradient(#FFF, #EEE);
  box-shadow: 0 0 0 5px #EEE;
  width: 150px;
  padding: 5px;
  margin: 5px;
}

<button>button</button>

有关box-shadow 的更多信息

Answer 2

您可以使用outline而不是box-shadow. 这两个属性都不占用空间。

button {
    border: 1px solid #CCC;
    border-bottom: 1px solid #BBB;
    background: linear-gradient(#FFF, #EEE);
    outline: 5px solid #EEE; /*this*/
    width: 150px;
    padding: 5px;
    margin: 5px;
}

<button>button</button>