如何为图像的css边框分配动态颜色？

:root {
  --border-color: red;
}

img {
  border: 2px solid var(--border-color);
}

// 获取图像元素
var img = document.querySelector('img');

// 监听鼠标移入事件
img.addEventListener('mouseover', function() {
  // 生成随机颜色
  var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
  
  // 更新CSS变量的值
  document.documentElement.style.setProperty('--border-color', randomColor);
});