导航菜单的渐变跨边框

Question

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

跨境图片示例

以下是我的代码。

任何帮助将不胜感激。

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

Answer 1

 


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

Answer 2

试试这个

J

积分转到此网站：https://css-tricks.com/examples/GradientBorder/