边框这种效果怎么写？

Question

想要实现这种效果

使用border-image没效果
css:
borderTop:i>0?'3px solid':'',
borderImage:'linear-gradient(yellow,#488C8A,#64C1B9,#7AD5D4,#64C1B9,#488C8A,yellow) 10 10 15 30 15 10 10'

Answer 1

css3 linear-gradient()

Answer 2

分析 线条特效， 两头小， 中间粗， 并且渐变两头往中间；
提供一个复杂点的 思路， 从中间分割为两个元素， 左右两个元素再次 从水平线 分割为 双伪元素 ，双伪元素 都往中间倾斜， 并且从 线性渐变处理， 就可以实现

Answer 3

不是border-image,而是background-image:-webkit-linear-gradient(0deg, transparent, blue, transparent);