css 邊框漸變色

如上圖所示，用border實現邊框的漸變：

　　先給div添加右邊框(或者左邊框),

border-right: 1px solid #ddd;

　　用border-image設置漸變

border-image: -webkit-linear-gradient(#fff, #000) 20 20;

完整的寫法：

　<!-- HTML -->

<view class='content'>
   <view>
      <image src='1.jpg'></image>
      <view>首頁</view>
   </view>
   <view>
      <image src='2.jpg'></image>
      <view>關於</view>
   </view>
   <view>
      <image src='3.jpg'></image>
      <view>成果</view>
   </view>
</view>

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
}
.content > view {
  flex-grow: 1;
  border-right: 1px solid #ddd;
  border-image: -webkit-linear-gradient(#fff, #000) 20 20;
}

border-image的各個參數詳細解析：http://web.jobbole.com/88773/