js实现圆角
使用CSS属性实现圆角
在JavaScript中操作元素的圆角效果，可以直接通过修改CSS的border-radius属性实现。以下是常见方法：
// 获取DOM元素
const element = document.getElementById('myElement');
// 设置统一圆角（四个角相同）
element.style.borderRadius = '10px';
// 分别设置每个角的圆角（顺时针：左上、右上、右下、左下）
element.style.borderRadius = '10px 5px 20px 15px';动态计算圆角值
可以通过JavaScript动态计算圆角值，例如基于元素尺寸的比例：
const element = document.getElementById('myElement');
const width = element.offsetWidth;
element.style.borderRadius = `${width * 0.1}px`; // 圆角为宽度的10%创建椭圆/圆形
将border-radius设置为50%可以创建圆形或椭圆形：
// 圆形（需元素宽高相同）
element.style.width = '100px';
element.style.height = '100px';
element.style.borderRadius = '50%';
// 椭圆形（宽高不同）
element.style.width = '150px';
element.style.height = '100px';
element.style.borderRadius = '50%';使用classList切换圆角样式
推荐通过添加/移除CSS类的方式管理样式：
/* CSS定义 */
.rounded {
border-radius: 8px;
}
.circle {
border-radius: 50%;
}// JavaScript操作类
element.classList.add('rounded');
element.classList.remove('circle');动画过渡效果
结合CSS transition实现圆角变化的动画：
/* CSS过渡效果 */
.transition {
transition: border-radius 0.3s ease;
}element.classList.add('transition');
element.style.borderRadius = '20px'; // 会有过渡动画效果注意事项
- 百分比值基于元素自身的宽度和高度计算
- 性能考虑：频繁修改样式可能引发重排，建议使用classList批量修改
- 兼容性：现代浏览器都支持border-radius，无需前缀
