导航栏的圆角？

Question

例如，我可以使用此

 -webkit-border-radius: 30px

为HTML5元素（如按钮）提供圆角而不是普通角角

我可以为导航栏执行相同操作吗？

以下是很棒的，但我只是好奇我是否可以给导航栏提供圆角。如果没有，那就没关系，这不是非常重要的

<div data-role="navbar">
<ul>
    <li> <a href="#" class="ui-btn-active" id=viewtherecent> Recent </a> </li>
    <li> <a href="#" id=viewthefrequency> Frequent </a> </li>
</ul>
</div> <!-- /navbar -->

Answer 1

我不确定你是指导航栏或导航栏中的按钮，所以我提供了2个演示。

演示圆角按钮

http://jsfiddle.net/r10tjkuz/

<强> CSS

 .nav-border {
    border-radius: 30px;    
    }

演示舍入导航栏

http://jsfiddle.net/6y1294rv/

<强> CSS

  .nav-bordera {
    border-top-left-radius:30px;
    border-bottom-left-radius:30px;   
    }

    .nav-borderb {
    border-top-right-radius:30px;
    border-bottom-right-radius:30px;  
    }

Answer 2

是的，你可以。将CSS类添加到导航栏并设置边框半径：

<div class="navbar" data-role="navbar"></div>

.navbar {
     border-radius: 30px;
}

如果您不想添加课程，可以使用CSS属性选择器（但我通常不会像这样设置样式）。

[data-role=navbar] { 
     border-radius: 30px;
}

Answer 3

Yeap或者供应商前缀对您来说很重要 - 因为它们似乎是：

[data-role=navbar] { -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; }

Answer 4

如果您使用的是 bootstrap 4，那么您可以通过将其添加到您的 css 中来实现：

.header-dark .navbar {

border-radius:25px;

}