JavaScript 坏了？

Question

我正在尝试设置 toprightradius，但它不会设置？我也在控制台中尝试过这个，它运行没有错误，只是不会设置。设置边框时，边框将被定位为半径有效(具有 flex 的边缘)，但原始背景色仍将显示在边框后面。

$('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 以避免在应用半径后出现不必要的溢出。

$('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>