边界半径 - 不光滑......为什么？

2015-07-11 64 views 0 likes

我试图创建一个使用边框半径的圆角按钮，但目前，角落并不像他们应该看的那样。边界半径 - 不光滑......为什么？

这行代码有什么问题吗？

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

来源

2015-07-11 user2277916

截图可以帮助我们确定你期待什么，结果是怎样... – asprin

您使用的是百分比，并不完全与浏览器兼容。取决于你使用什么来测试它。任何理由*为什么*您使用百分比？ – Aibrean

新来的CSS，思想百分比应该很好。我按照建议尝试了像素，它工作。谢谢！ – user2277916

回答

您在（％）中给出了边框半径，给出了像素中的边框半径。它会按你的想法工作。

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

来源

2015-07-11 12:51:34

'％'很好，你有没有尝试过玩百分比，虽然'30％'很多？ –

这个工作，非常感谢你！ – user2277916

要获得圆润的外观，简单地加大对边境半径像素大小。

创建一个自定义类名称为round。我们将使用这个类来默认修改由Bootstrap提供的按钮，以。

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

添加CSS修改自定义类

.round { 
    border-radius: 24px; 
}

Demo

来源

2015-07-11 13:23:21 Cyclotron3x3

边界半径 - 不光滑......为什么？

回答

相关问题