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展开半径的阴影，而不是创建多个偏移的框阴影：

＆＃13;

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;
}

＆＃13;

<button>button</button>

＆＃13;

更多info on 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>

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

2 个答案: