Question

我尝试使用边框半径创建一个圆角按钮，但目前，角落看起来并不像他们想象的那样。

这行代码有什么问题吗？

<li style="padding-left:20px; padding-top:8px">
      <!-- Login modal -->
    <button class="btn-xs btn btn-navbar" data-toggle="modal" data-target="#myModal" style = "margin-top: 10px; border-radius: 30%; background-color: white;">
      Log in
    </button>
</li>

Answer 1

您在（％）中给出了边框半径，以像素为单位给出边框半径。它会按你的意愿工作。

＆＃13;

<li style="padding-left:20px; padding-top:8px">
<!-- Login modal -->
  <button class="btn-xs btn btn-navbar" data-toggle="modal" data-target="#myModal" style = "margin-top: 10px; border-radius: 30px; background-color: white;">
    Log in
  </button>
</li>

＆＃13;

Answer 2

要获得圆润外观，只需增加边框上的像素大小即可半径。

创建自定义类名称round。我们将使用这个类默认情况下修改Bootstrap提供的按钮。

< button type="button" class="btn btn-primary btn-lg round"> Log In < /button>

将CSS修改添加到自定义类

.round {
  border-radius: 24px;
}

Demo

border-radius - 不顺利......为什么？

2 个答案: