我知道默认情况下不会这样做,但我试图强迫它。
我正在构建一个类似按钮的锚,它有一个坚固的盒子阴影(没有模糊)来创造深度的幻觉,当它盘旋时它会做出反应。
唯一的问题是它仅在光标位于锚本身上方时才会作出反应,并且由于它在悬停时会移动几个像素,这取决于光标与边缘的接近程度,它会导致锚点闪烁。
是否可以将阴影命令包含在元素的总大小中?而且我知道按钮在这方面行为不端是一件令人讨厌的事情,但编码是否可怕?我意识到这是一个设计问题,但我真的在代码之后。
TLDR:我的锚点在徘徊太靠近边缘时闪烁。替代吗
代码正常运行,但无论如何我都会粘贴它。
以下是代码:
.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);
}

<a class="btn" href="#">suscribe</a>
&#13;
修改 谢谢Paulie_D,就像一个魅力!绝对位置向各个方向伸展的伪元素是可行的方法。
答案 0 :(得分:1)
不能在高度/宽度计算中包含盒阴影,但是可以使用伪元素来增加单击/悬停区域,该伪元素的大小包括盒子阴影
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>