css - 导航菜单的渐变跨界

我正在尝试使用类，如所附示例所示，添加没有运气的渐变交叉边界。

跨境图片示例



下面是我的代码。

任何帮助将不胜感激。

<li class="newnav-links col-sm-6  dropdown-left dropdown-top">/li>
<li class="newnav-links col-sm-6  dropdown-right dropdown-top">/li>
<li class="newnav-links col-sm-6  dropdown-left dropdown-middle">/li>
<li class="newnav-links col-sm-6  dropdown-right dropdown-middle">/li>
<li class="newnav-links col-sm-6  dropdown-left dropdown-bottom">/li>
<li class="newnav-links col-sm-6  dropdown-right dropdown-bottom">/li>

最佳答案

 


   * {
   box-sizng : border-box;
  }
   ul {
    list-style: none;
    }
 li {
   width: 40%;
  float: left;
 position: relative;
  padding:15px;

 }
.newnav-links.dropdown-left.dropdown-top::after {
 background: rgba(0, 0, 0, 0) linear-gradient(#ffffff, #dddddd,
  #999999,#333333, #000000, #000000, #000000) repeat scroll 0 0;
 }
.newnav-links.dropdown-left.dropdown-bottom::after {
 background: rgba(0, 0, 0, 0) linear-gradient(#000, #000,
  #000,#333333, #999, #ddd, #fff) repeat scroll 0 0;
 }

li::after {
 bottom: 0;
 content: "";
 height: 100%;
 position: absolute;
 right: 0;
 width: 1px;
   }
  li.dropdown-right.dropdown-top::after {
   display: none;
  }
.newnav-links.dropdown-left.dropdown-middle::after {
  background:#000000;
 }
.dropdown-right::before {
 background: rgba(0, 0, 0, 0) linear-gradient(to right, #000000, #000000,
 #666666, #999999, #ffffff, #ffffff) repeat scroll 0 0;
 bottom: 0;
 content: "";
 height: 1px;
 left: 0;
 position: absolute;
 width: 100%;
 }
 .dropdown-left::before {
  background: rgba(0, 0, 0, 0) linear-gradient(to left, #000000, #000000,
  #666666, #999999, #ffffff, #ffffff) repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 1px;
  right: 0;
  position: absolute;
  width: 100%;
 }
 li.dropdown-bottom::before {
 display: none;
 }

<ul>
<li class="newnav-links dropdown-left dropdown-top">link1</li>
<li class="newnav-links dropdown-right dropdown-top">link2</li>
<li class="newnav-links dropdown-left dropdown-middle">link3</li>
<li class="newnav-links  dropdown-right dropdown-middle">link4</li>
<li class="newnav-links   dropdown-left dropdown-bottom">link5</li>
<li class="newnav-links  dropdown-right dropdown-bottom">link6</li>
</ul>
关于css - 导航菜单的渐变跨界，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40589536/