为 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 边框渐变色只显示左右侧，如何解决？的详细内容，更多请关注php中文网其它相关文章！