css - 带有边框底部和边框半径的按钮不是预期的结果

Question

这是我想要完成的:

如您所见，底部有一个小边框，我尝试添加 border-bottom: 1px solid #c1ad6f 但结果为:

由于半径原因，边框未完全填充。

.btn {
  background: #d5c289;
  border-bottom: 6px solid #c1ad6f;
  font-weight: 500;
  font-size: 1.125rem;
  padding: 1.25rem;
  border-radius: 4px;
}

<a class="btn" href="#form" role="button">Enroll</a>

Answer 1

您可以考虑使用 box-shadow 而不是 border 来更好地实现这一点:

.box {
  display: inline-block;
  margin: 10px;
  height: 100px;
  width: 200px;
  background: #d5c289;
  box-sizing:border-box;
  border-radius: 0 0 20px 20px;
}
.shadow {
  box-shadow: 0 -10px 0 0 #c1ad6f inset;
  animation: anime 2s infinite linear alternate;
}
.border {
  border-bottom: 10px solid #c1ad6f;
  animation: anime-alt 2s infinite linear alternate;
}

@keyframes anime {
  from {box-shadow: 0 -1px 0 0 #c1ad6f inset;}
  to {box-shadow: 0 -30px 0 0 #c1ad6f inset;}}
@keyframes anime-alt {
  from {border-bottom: 1px solid #c1ad6f;}
  to {border-bottom: 30px solid #c1ad6f;}}

<div class="box shadow">
  Good one with box-shadow
</div>

<div class="box border">
  Not good with border
</div>