如何改变 box-shadow 的宽度 css

Question

我有一个悬停时有框阴影的按钮。

我不知道如何使框阴影的宽度变小。

我将附上我的按钮的当前状态：

相关代码如下：

.paddingButtons {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.paddingButtons:hover {
  -webkit-box-shadow: 0px 2px 3px 15px rgba(142, 84, 197, 0.6), inset 0 0 30px rgba(142, 84, 197, 1);
  -moz-box-shadow: 0px 2px 3px 15px rgba(142, 84, 197, 0.6), inset 0 0 30px rgba(142, 84, 197, 1);
  box-shadow: 0px 2px 3px 15px rgba(142, 84, 197, 0.6), inset 0 0 30px rgba(142, 84, 197, 1);
}

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  justify-items: center;
  text-align: center;
}

.full-row {
  grid-column: 1/4;
  text-align: center;
}

<div class="wrapper">
  <div class="full-row margin-small">
    <a href="#" class="paddingButtons">
      <img src="https://i.imgur.com/Ilwpsig.png" class="default" width=80% />
    </a>
  </div>
</div>

Answer 1

像下面这样调整你的代码。

.paddingButtons {
  display:inline-block; /* to cover all the image */
}
img {
  display:block; /* to avoid white space at the bottom */
}

.paddingButtons:hover {
  box-shadow:inset 0 0 30px rgba(142, 84, 197, 1); /* only inset is needed */
}

.wrapper {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  padding: 10px;
  justify-items: center;
  text-align: center;
}

.full-row {
  grid-column: 1/4;
  text-align: center;
}

<div class="wrapper">
  <div class="full-row margin-small">
    <a href="#" class="paddingButtons">
      <img src="https://i.imgur.com/Ilwpsig.png" class="default" > <!-- removed width=80% -->
    </a>
  </div>
</div>

如何改变 box-shadow 的宽度 css

How to change the width of box-shadow css

css

box-shadow