JavaScript破了？

Question

我正在尝试设置toprightradius，但它不会设置？我也在控制台中尝试了这个，它运行时没有错误，它只是不会设置。设置边框时，边框的位置就像半径一样（有一条曲线边），但原始背景颜色仍会显示在边框后面。

$('ul#parent-nav').children('li').last().style.borderTopRightRadius = "19px";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="tabs is-boxed">
    <ul id="parent-nav">
        <li class="is-active">
            <a href="https://bulma.io/documentation/layout/container/"><i class="fa fa-user"></i> &nbsp; {{ Auth::user()->username }}</a>
        </li>
        <li>
            <a href="https://bulma.io/documentation/form/general"><i class="fa fa-users"></i> &nbsp; Page1</a>
        </li>
        <li>
            <a href="https://bulma.io/documentation/components/breadcrumb/"><i class="fa fa-shopping-basket"></i> &nbsp; Page2</a>
        </li>
        <li>
            <a href="https://bulma.io/documentation/components/breadcrumb/"><i class="fa fa-angle-double-up"></i> &nbsp; Page3</a>
        </li>
    </ul>
</nav>

Answer 1

您需要使用jQuery语法并将overflow:hidden添加到元素中，以避免在应用radius之后出现意外溢出。

$('ul#parent-nav').children('li').last().css('border-top-right-radius',"19px");

li {
 display:inline-block;
 vertical-align:top;
 width:110px;
 height:50px;
 background:red;
 border:1px solid;
 overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="tabs is-boxed">
  <ul id="parent-nav">
    <li class="is-active">
      <a href="https://bulma.io/documentation/layout/container/"><i class="fa fa-user"></i> active</a>
    </li>
    <li>
      <a href="https://bulma.io/documentation/form/general"><i class="fa fa-users"></i> &nbsp; Page1</a>
    </li>
    <li>
      <a href="https://bulma.io/documentation/components/breadcrumb/"><i class="fa fa-shopping-basket"></i> &nbsp; Page2</a>
    </li>
    <li>
      <a href="https://bulma.io/documentation/components/breadcrumb/"><i class="fa fa-angle-double-up"></i> &nbsp; Page3</a>
    </li>
  </ul>
</nav>

Answer 2

我希望这会有所帮助。

$('#parent-nav li:last-child').css("border-top-right-radius","19px")

li{
  padding: 10px;
  border: 1px solid red;
  margin-bottom: 10px;
display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="tabs is-boxed">
    <ul id="parent-nav">
        <li class="is-active">
            <a href="https://bulma.io/documentation/layout/container/"><i class="fa fa-user"></i> &nbsp; {{ Auth::user()->username }}</a>
        </li>
        <li>
            <a href="https://bulma.io/documentation/form/general"><i class="fa fa-users"></i> &nbsp; Page1</a>
        </li>
        <li>
            <a href="https://bulma.io/documentation/components/breadcrumb/"><i class="fa fa-shopping-basket"></i> &nbsp; Page2</a>
        </li>
        <li>
            <a href="https://bulma.io/documentation/components/breadcrumb/"><i class="fa fa-angle-double-up"></i> &nbsp; Page3</a>
        </li>
    </ul>
</nav>