如何仅向 div 的顶部和底部添加渐变边框

Question

我正在寻找一种方法，仅向顶部和底部边框添加渐变边框（从黑色到灰色），而不向边缘添加渐变边框。

有什么简单的办法吗？

Answer 1

border-top: 10px solid red;
border-bottom: 10px solid red;
border-left-width: 0;
border-right-width: 0;
border-image: linear-gradient(to right, red, violet) 1 stretch;

Chrome 和 Safari 需要 border-right-width 和 border-left-width。