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

yunchong_zhao2025-11-20 10:42

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

前言

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

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

重回主题吧.

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

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

css 复制代码

.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;
    }
  }
 }

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