导航菜单的渐变边框

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

试试这个

.top-to-bottom {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
    -o-border-image:
      -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%;
}
.bottom-to-top {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image: 
      -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
      -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;  
    -o-border-image:
      -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
}

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

Answer 2

 <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>   * {
   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>

导航菜单的渐变边框

Gradient cross borders for navigation menu

css

gradient

border