盒子阴影插入填充留下未填充的边缘？答案

【问题标题】：Box-shadow Inset fill leaving unfilled edges?盒子阴影插入填充留下未填充的边缘？
【发布时间】：2020-08-31 23:21:44
【问题描述】：

我正在使用 css 过渡在悬停期间使用 box-shadow inset 填充我的按钮。

我也在使用过渡来改变悬停期间按钮的边框半径。

当我悬停时，会发生过渡，但我在按钮的每个内角都留下了一条未填充的细曲线。

HTML

  <div class="container">
  <button type="button" id="upSwipe">Up Swipe</button>
  <button type="button" id="downSwipe">Down Swipe</button>
  <button type="button" id="leftSwipe">Left Swipe</button>
  <button type="button" id="rightSwipe">Right Swipe</button>
</div>

CSS：

* {
  margin: 0;
  padding: 0;
  background: none;
}

.container {
  position: absolute;
  background: black;
  background-size: cover;
  height: 100vh;
  width: 100vw;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

button {
  height: 200px;
  width: 200px;

  margin: 20px;

  background: none;
  border: 10px solid orange;
  border-radius: 20px;

  color: orange;
  font-size: 30px;

  box-shadow: inset 0 0 0 orange;

  transition: 0.5s ease;
}

#upSwipe:hover {
  box-shadow: inset 0 -7em 0 orange;
  color: black;
  border-radius: 30px;
}
* {
  margin: 0;
  padding: 0;
  background: none;
}

.container {
  position: absolute;
  background: black;
  background-size: cover;
  height: 100vh;
  width: 100vw;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

button {
  height: 200px;
  width: 200px;

  margin: 20px;

  background: none;
  border: 10px solid orange;
  border-radius: 20px;

  color: orange;
  font-size: 30px;

  box-shadow: inset 0 0 0 orange;

  transition: 0.5s ease;
}

#upSwipe:hover {
  box-shadow: inset 0 -7em 0 orange;
  color: black;
  border-radius: 30px;
}

这是我的尝试： https://codepen.io/thomaswanless/pen/XWmPePe

感谢您的帮助！

【问题讨论】：

只需从悬停 CSS 中删除 border-radius 属性，或者根据按钮半径将 border-radius 减少到 20px
您可以将border:none 设置为所有:hover 类。

标签： html css

【解决方案1】：

您需要从按钮更改border-radius。

在悬停时移除border-radius。

仅在悬停时删除 border-radius 并不能解决问题，您可以增加按钮的 border 大小或减小按钮的 border-radius。

* {
  margin: 0;
  padding: 0;
  background: none;
}

.container {
  position: absolute;
  background: black;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

button {
  height: 200px;
  width: 200px;
  margin: 20px;
  background: none;
  border: 10px solid orange;
  border-radius: 10px;
  color: orange;
  font-size: 30px;
  transition: 0.5s ease;
}

#upSwipe:hover {
  box-shadow: inset 0 -7em 0 orange;
  color: black;
}

#downSwipe:hover {
  box-shadow: inset 0 7em 0 orange;
  color: black;
}

#leftSwipe:hover {
  box-shadow: inset 7em 0 0 orange;
  color: black;
}

#rightSwipe:hover {
  box-shadow: inset -7em 0 0 orange;
  color: black;
}

<div class="container">
  <button type="button" id="upSwipe">Up Swipe</button>
  <button type="button" id="downSwipe">Down Swipe</button>
  <button type="button" id="leftSwipe">Left Swipe</button>
  <button type="button" id="rightSwipe">Right Swipe</button>
</div>

【讨论】：

【解决方案2】：

将border:none 设置为所有:hover 类，您可以保留按钮的形状（具有内半径的那个，而不是矩形）。

* {
  margin: 0;
  padding: 0;
  background: none;
}

.container {
  position: absolute;
  background: black;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

button {
  height: 200px;
  width: 200px;
  margin: 20px;
  background: none;
  border: 10px solid orange;
  border-radius: 20px;
  color: orange;
  font-size: 30px;
  box-shadow: inset 0 0 0 orange;
  transition: 0.5s ease;
}

#upSwipe:hover {
  box-shadow: inset 0 -7em 0 orange;
  color: black;
  border-radius: 30px;
  border: none;
}

#downSwipe:hover {
  box-shadow: inset 0 7em 0 orange;
  color: black;
  border-radius: 30px;
  border: none;
}

#leftSwipe:hover {
  box-shadow: inset 7em 0 0 orange;
  color: black;
  border-radius: 30px;
  border: none;
}

#rightSwipe:hover {
  box-shadow: inset -7em 0 0 orange;
  color: black;
  border-radius: 30px;
  border: none;
}

<div class="container">
  <button type="button" id="upSwipe">Up Swipe</button>
  <button type="button" id="downSwipe">Down Swipe</button>
  <button type="button" id="leftSwipe">Left Swipe</button>
  <button type="button" id="rightSwipe">Right Swipe</button>
</div>

【讨论】：