Question

所以我在悬停时有一个边框过渡，在圆形按钮上有效，因此边框的大小会增加。但是，边框向下扩展，向下按下按钮。是否有任何方法可以使边界向外均匀扩展？我搜索了这个网站和其他人的解决方案，虽然有类似的问题，但他们没有具体回答这个问题。

谢谢！

HTML：

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

CSS：

.btn {
  vertical-align: top;
  transform: translateY(20px);
  background-color: black;
  display: inline-block;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 0px solid red;
  transition: border-width 0.1s ease-in;
  margin: 0.5em;
}

.btn:hover {
  border: 20px solid red;
}

.btn:focus {
  border: 75px solid red;
}

Answer 1

您可以通过在按钮后面放置class C extends B { void show() { new A().show(); super.show(); System.out.println("inside C"); } }并在悬停时转换其缩放并根据需要进行对焦来生成边框效果，而不是使用边框。

*还请注意，HTML5中不推荐使用pseudoelement。您可以使用CSS来集中内容。

<center>

.btn {
  display: block;
  margin: 5rem auto;
  position: relative;
  background-color: black;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  transition: border-width 0.1s ease-in;
}

.btn:before {
  content: '';
  display: block;
  position: absolute;
  background: red;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  z-index: -1;
  transition: all .1s ease;
}

.btn:hover:before {
  transform: scale(1.1);
}

.btn:focus:before {
  transform: scale(1.25);
}

边界的CSS过渡正在按下按钮

1 个答案: