html - 如何使突出显示链接符合 CSS 形状

Question

如何使链接轮廓(蓝色)符合 CSS 形状？我的意思是轮廓应该与链接边框的形状相同。

您是否介意链接或帮助我找到合适的词来描述它，以便我可以对其进行适当的研究，或者可能进行一些基本修复？

Answer 1

您可以使用box-shadow(悬停查看)

button {
  width: 200px;
  height: 100px;
  background: cornflowerblue;
  border-radius: 5px 25px 5px 25px;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
  border-left:0;
  border-right:0;
  outline: 0;
}
button:hover {
  box-shadow: 0 0 0 5px orange;
}

<button></button>