js 实现圆角

在JavaScript中实现圆角效果通常涉及操作DOM元素的border-radius属性。以下是几种常见方法：

通过style属性直接设置

使用元素的style属性直接修改borderRadius，适用于单个元素的动态调整：

document.getElementById('elementId').style.borderRadius = '10px';

支持百分比值实现椭圆形圆角：

element.style.borderRadius = '50%';

使用classList添加CSS类

定义CSS类后通过JavaScript切换：

.rounded-corners {
  border-radius: 15px;
}

document.querySelector('.target').classList.add('rounded-corners');

动态创建样式规则

通过insertRule方法批量设置样式：

const style = document.createElement('style');
style.innerHTML = `.dynamic-round { border-radius: 8px 16px; }`;
document.head.appendChild(style);

使用Canvas绘制圆角

在Canvas中需要手动绘制路径：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.roundRect(10, 10, 100, 100, [20]);
ctx.fillStyle = 'blue';
ctx.fill();

注意事项

• 数值单位可以是px、em或百分比
• 支持四个角独立设置：borderRadius: '10px 5px 20px 0'
• 现代浏览器支持border-radius属性，无需前缀
• 修改样式后可能需要触发重绘：element.offsetHeight;