Question

这是我想要完成的事情：

正如您所看到的，底部有一个小边框，我试图添加border-bottom: 1px solid #c1ad6f，但结果是：

边界未完全填充半径原因。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以考虑box-shadow而不是边框来更好地实现这一目标：

.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>

Answer 2

这是使用box-shadow使边框变圆的简单技巧。它会准确地给出你想要的输出。

＆＃13;

.btn-bordered {
    background: #17aa56;
    color: #fff;
    border-radius: 15px;
    box-shadow: 0 10px #119e4d;
    padding: 25px 60px 25px 90px;
}
.btn-block {
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: #ddd;
    cursor: pointer;
    padding: 25px 80px;
    display: inline-block;
    margin: 15px 30px;
    text-transform: Capitialize;
    letter-spacing: 1px;
    font-weight: 700;
    position: relative;
    overflow:hidden;
}

＆＃13;

<button class="btn-bordered btn-block" type="button">Bottom Rounded Button</button>

＆＃13;

Answer 3

在你提供的图像中，有左边框和右边框设置，如果你想让它看起来像第一张图像，它们应该是0像素。

当您将这两个div与不同的边界进行比较时，您可以看到我的陈述是如何真实的：

＆＃13;

.div1 {
    padding: 4px;
    border: 1px solid #d5c289;
    background-color: #d5c289;
    border-bottom: 2px solid #c1ad6f;
    width: 100px;
    height: 40px;
    border-radius: 4px;
}

.div2 {
    padding: 4px;
    background-color: #d5c289;
    border-bottom: 2px solid #c1ad6f;
    width: 100px;
    height: 40px;
    border-radius: 4px;
}

＆＃13;

<div class="div1">
    Side borders
</div>
<hr>
<div class="div2">
    No side borders
</div>

＆＃13;

当你放大时，你可以看到第一个与你的＆＃34;错误的＆＃34;一个

Answer 4

@AlexanderKim，你可以增加边界底部。像这样：border-bottom：5px solid＃c1ad6f;。我做了这个小提琴：jsfiddle.net/bektkdnz，但增加了填充，所以更容易看到

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

4 个答案: