js实现边框渐变

实现边框渐变的几种方法

使用CSS的border-image属性

CSS的border-image属性可以直接为边框设置渐变效果，无需JavaScript。但可以通过JavaScript动态修改渐变样式。

.element {
  border: 10px solid;
  border-image: linear-gradient(45deg, red, blue) 1;
}

通过JavaScript动态修改：

const element = document.querySelector('.element');
element.style.borderImage = 'linear-gradient(45deg, purple, green) 1';

使用伪元素模拟渐变边框

通过绝对定位的伪元素实现更灵活的渐变边框效果。

.element {
  position: relative;
  width: 200px;
  height: 200px;
  background: white;
}

.element::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(45deg, red, blue);
  z-index: -1;
  border-radius: 10px;
}

JavaScript动态修改渐变：

const element = document.querySelector('.element');
element.style.setProperty('--gradient', 'linear-gradient(45deg, purple, green)');

使用Canvas绘制渐变边框

通过Canvas API可以创建更复杂的渐变效果。

<canvas id="gradientBorder" width="200" height="200"></canvas>

const canvas = document.getElementById('gradientBorder');
const ctx = canvas.getContext('2d');

function drawGradientBorder() {
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(1, 'blue');

  ctx.strokeStyle = gradient;
  ctx.lineWidth = 10;
  ctx.strokeRect(5, 5, canvas.width - 10, canvas.height - 10);
}

drawGradientBorder();

使用SVG实现渐变边框

通过SVG元素创建可缩放的渐变边框。

<div class="svg-border">
  <svg width="100%" height="100%">
    <rect x="5" y="5" width="190" height="190" stroke="url(#gradient)" stroke-width="10" fill="none"/>
    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
    </defs>
  </svg>
</div>

JavaScript动态修改SVG渐变：

const gradient = document.querySelector('#gradient');
gradient.innerHTML = `
  <stop offset="0%" stop-color="purple"/>
  <stop offset="100%" stop-color="green"/>
`;

注意事项

• border-image会覆盖border-radius属性
• 伪元素方法需要考虑父元素的overflow属性
• Canvas方法需要处理高DPI屏幕的缩放问题
• SVG方法可能需要额外的HTML结构

这些方法都可以通过JavaScript动态修改渐变颜色、角度等参数，实现交互效果。