Question

我知道默认情况下不会这样做，但我试图强迫它。

我正在构建一个类似按钮的锚，它有一个坚固的盒子阴影（没有模糊）来创造深度的幻觉，当它盘旋时它会做出反应。

唯一的问题是它仅在光标位于锚本身上方时才会作出反应，并且由于它在悬停时会移动几个像素，这取决于光标与边缘的接近程度，它会导致锚点闪烁。

是否可以将阴影命令包含在元素的总大小中？而且我知道按钮在这方面行为不端是一件令人讨厌的事情，但编码是否可怕？我意识到这是一个设计问题，但我真的在代码之后。

TLDR：我的锚点在徘徊太靠近边缘时闪烁。替代吗

代码正常运行，但无论如何我都会粘贴它。

以下是代码：

＆＃13;

.btn {
  display: inline-block;
  width: 50%;
  margin-left: 25%;
  /*center*/
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #71e2ff;
  box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff;
}
.btn:hover {
  box-shadow: 0 1px #34d6ff, 0 2px #34d6ff, 0 3px #34d6ff, 0 4px #34d6ff, 0 5px #34d6ff, 0 6px #34d6ff;
  transform: translateY(-2px);
}
.btn:active {
  box-shadow: 0 1px #34d6ff, 0 2px #34d6ff;
  transform: translateY(0);
}

＆＃13;

 <a class="btn" href="#">suscribe</a>

＆＃13;

修改谢谢Paulie_D，就像一个魅力！绝对位置向各个方向伸展的伪元素是可行的方法。

Answer 1

不能在高度/宽度计算中包含盒阴影，但是可以使用伪元素来增加单击/悬停区域，该伪元素的大小包括盒子阴影

来自CSS-Tricks

button {
  border: 0;
  border-radius: 0;
  outline: 0;
  background: #4e68c7;
  box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
  color: white;
  white-space: nowrap;
  padding: 9px 16px;
  position: relative;
}
button:hover,
button:focus {
  background: #3d57b4;
}
button:hover,
button:active {
  box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
  -moz-transform: translate(3px, 3px);
  -ms-transform: translate(3px, 3px);
  -webkit-transform: translate(3px, 3px);
  transform: translate(3px, 3px);
}
button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -5px;
  bottom: -5px;
  outline: 1px solid red;
  /* for demo */
}
button:hover::after,
button:active:after {
  top: -3px;
  left: -3px;
  right: -2px;
  bottom: -2px;
}
body {
  padding: 30px;
}
#message {
  padding: 10px 0;
}

<button>A Button</button>

我可以/应该在元素的总大小中添加box-shadow的大小吗？

1 个答案: