CSS 边框渐变色只显示左右侧，如何解决？

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《CSS 边框渐变色只显示左右侧，如何解决？ 》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

为 CSS 边框添加渐变色

想要在 CSS 边框上应用渐变色，可以使用 border-image 属性。

问题：只显示左右渐变

按照示例代码实现后，渐变色仅显示在边框的左右侧。如何解决？

答案：渐变色设置错误

示例代码中存在渐变色设置错误。正确设置如下：

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

为了解决只显示左右渐变的问题，可以使用 border-image 的 radial-gradient，该渐变色向外发散。

border-image: radial-gradient(rgba(#fff,0),rgba(#fff,0), #00BBF2, rgba(#fff,0), rgba(#fff,0)) 50 50;

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS 边框渐变色只显示左右侧，如何解决？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。