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/