在前端样式开发中，给元素设置圆角是很常见的需求，但有时我们需要根据交互状态动态调整圆角，比如弹窗展开时顶部有圆角、底部无圆角，收起时恢复全部圆角，这时候就需要单独控制底部圆角而不影响顶部形状。
方案一：使用CSS单独设置圆角方向
CSS的border-radius属性支持分别设置四个方向的圆角，语法格式为border-radius: 左上 右上 右下 左下，如果只设置两个值，则对应左上右下 右上左下，三个值对应左上 右上左下 右下。我们可以利用这个特性，单独控制底部两个圆角的值。
首先定义基础样式，给元素设置顶部圆角：
/* 基础样式，顶部圆角10px，底部圆角0 */
.box {
width: 200px;
height: 120px;
background-color: #4a90e2;
border-radius: 10px 10px 0 0;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: border-radius 0.3s ease;
}
/* 展开状态，恢复全部圆角 */
.box.expand {
border-radius: 10px;
}
上面的代码中，默认状态下border-radius只设置了左上和右上为10px，右下和左下为0，所以底部没有圆角。当需要恢复底部圆角时，只需要给元素添加expand类，修改border-radius为四个方向都是10px即可，顶部圆角始终保持不变。
方案二：使用JavaScript动态修改样式
如果需要根据复杂逻辑动态控制，比如滚动到特定位置才取消底部圆角，可以使用JavaScript直接修改元素的style属性，单独设置底部两个圆角的值。
首先定义HTML结构：
<div class="dynamic-box" id="targetBox">
动态控制圆角的元素
</div>
<button onclick="cancelBottomRadius()">取消底部圆角</button>
<button onclick="resetRadius()">恢复全部圆角</button>
然后编写CSS基础样式，初始设置全部圆角：
.dynamic-box {
width: 200px;
height: 120px;
background-color: #67c23a;
border-radius: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: border-radius 0.3s ease;
}
最后编写JavaScript逻辑，单独修改底部圆角：
// 获取目标元素
const targetBox = document.getElementById('targetBox');
// 取消底部圆角，只修改右下和左下圆角
function cancelBottomRadius() {
// 单独设置底部两个圆角为0，不影响顶部
targetBox.style.borderBottomLeftRadius = '0';
targetBox.style.borderBottomRightRadius = '0';
}
// 恢复全部圆角
function resetRadius() {
// 重置底部圆角回10px，或者可以直接清空内联样式恢复CSS定义的默认值
targetBox.style.borderBottomLeftRadius = '10px';
targetBox.style.borderBottomRightRadius = '10px';
}
这里用到了borderBottomLeftRadius和borderBottomRightRadius两个单独的CSS属性，它们分别控制左下角和右下角的圆角，修改这两个属性不会影响borderTopLeftRadius和borderTopRightRadius，也就是不会影响顶部的圆角形状。
两种方案对比
我们可以通过下表对比两种方案的适用场景：
| 方案 | 优势 | 适用场景 |
|---|---|---|
| CSS类名切换 | 样式和逻辑分离，维护方便，支持过渡动画 | 状态切换逻辑简单，比如点击、hover等固定状态变化 |
| JavaScript动态修改 | 灵活度高，可结合复杂业务逻辑控制 | 需要根据滚动、接口返回等动态条件控制圆角 |
需要注意的是，如果使用内联样式修改圆角，内联样式的优先级高于CSS类样式，所以如果同时用两种方式控制，需要注意优先级问题，避免样式不生效。另外，修改border-radius的四个值整体和单独修改底部两个属性，最终效果是一致的，选择哪种方式取决于具体的业务需求。
CSSborder_radiusJavaScriptDOM操作修改时间：2026-07-10 14:33:25