如何仅将渐变边框添加到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。