css实现边框圆角的渐变色效果

上一次写博客还是2024.8月。 等到这次写博客是2025.11.14号 过去了一年多了! 比较佩服自己是还在写前端,有点自嘲, 哈哈哈

前言
最近一年来,ai的发展其实对前端影响还是很大的,现在公司招人必要条件就是了解和使用过ai

大多数效果和知识其实都可以从AI中找到答案,其实博客现在有些不是很重要,当然新手最好还是老老实实多动手去记录自己的教训和经验,毕竟AI只是工具并不会完全替代我们. 我也使用一年多的ai来辅助编程. 他只能实现一些简单页面和逻辑效果,复杂的业务和特殊的场景无法帮我们实现,而且可能很多地方事与愿违,还得靠自己手动修改代码.

重回主题吧.

首先边框的背景图是 border-image 但是使用他的话 会把border-radius的效果覆盖啦

如果想贴合圆角的话,就需要通过伪类选择器来实现了.

.wrapper {width: 700px;border-radius: 20px;&.focus {// 渐变边框背景&::before {content: '';position: absolute;inset: 0;padding: 1px; // 边框厚度background: conic-gradient(from 0deg,#0ddaff,#b065fc,#12c2fe,#b366fc,#1f83f8,#b366fc,#0ddaff);border-radius: 20px;mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite: xor;mask-composite: exclude;z-index: 0;}}}

不管何时 还是要学会总结,然后去记录自己获取和尝试做过的东西留下记录,也是一种成长的经历吧,极少成多,自然会慢慢熟练起来