div {
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

这里的border-image-slice为什么设置为1，为什么不是4，或者其他值？

这个简单一两句解释不好，这个值也可以是其他值，关键在于这个值相当于你div的百分几，如果非常小，从显示效果来说1和4其实差别不大，建议先了解透border-image-slice的绘制原理，然后试着改下slice的值看效果，理解后你就知道这个取值了。
可以看下：https://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/

回答