CSS 渐变边框只显示左右侧，怎么解决？

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《CSS 渐变边框只显示左右侧，怎么解决？》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

css如何实现渐变边框左右显示？

在使用 css 渐变边框时，如果遇到只显示左右侧的情况，可能是因为渐变色设置不正确。

原本代码中，渐变色的设置如下：

border-image: linear-gradient(rgba(255, 255, 255, 0.00) 0%, #00bbf2 20%, rgba(255, 255, 255, 0.00) 99%) 2 2;

放大观察可以发现，渐变色的设置有问题，中间缺少一个过渡值。

修改后的正确代码为：

border-image: linear-gradient(rgba(255, 255, 255, 0.00) 0%, #00BBF2 20%, #00BBF2 40%, rgba(255, 255, 255, 0.00) 99%) 2 2;

这样，渐变边框就可以正常左右显示了。

理论要掌握，实操不能落！以上关于《CSS 渐变边框只显示左右侧，怎么解决？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！