Css 使元素收缩时左上/右上边界半径不变？

有一个相当简单的扰流板代码为我的网站。它有一种很大的边界半径，当元素被扩展时，这是很好的，但是当元素被收缩时，就没有那么大了。有没有什么方法可以使底部边界半径在收缩时变为0px，或者这不是CSS的问题

是的，我希望它是一个CSS解决方案。对我来说，缩小边界半径并不是什么大问题，但你知道，如果可能的话，我还是尽量不缩小边界半径为好

我不知道如何使我的代码使用的javascript在stackoverflow上工作（它只会给我带来错误），因此是一个看起来像是扩展的屏幕截图

.panel{
背景色：#F9F9F9；
边框：1px纯色灰色；
边界半径：22px 22px 10px 10px；
字体系列：arial；
}
.面板>h3{
字体大小：14px；
背景色：#820D1A；
颜色：#ededed；
边框底部：1px实心#000；
文本对齐：左对齐；
填充：4px；
左侧填充：20px；
边际：0px；
边界半径：21px 21px 0px 0px；
}
.panel>div{
填充：4px；
}
.panel>div:after{
显示：块；
明确：两者皆有；
}

（参数1）（单击以切换）
（2）

.panel{
背景色：#820D1A；
边框：1px纯色灰色；
边界半径：22px 22px 10px 10px；
字体系列：arial；
}
.面板>h3{
字体大小：14px；
颜色：#ededed；
文本对齐：左对齐；
左侧填充：20px；
保证金：5px；
}
.panel>div{
填充：4px；
背景色：#FFF；
}
.panel>div:after{
显示：块；
明确：两者皆有；
}

（参数1）（单击以切换）
（2）

嗯，在胡闹之后，我得到了答案：不，这是不可能的。我刚刚决定将顶部边界半径减少5像素（使其为17px），使其看起来正常打开或关闭

---

感谢所有提供帮助的人，不过~

在另一个下方是否应该有一个非隐藏的

DIV

？你是什么意思。。。？发生的情况是，单击，然后.panel>div交换显示：block，因为所有扰流板框都工作。我删除了我正在使用的脚本，因为它与封闭框的边界半径无关，当我试图将它放在这里时，它一直在出错。不值得这么做。h3有两个填充规则来缩进文本。是的，背景颜色是故意的。因此.panel>div的背景颜色是正确的，而不是将红色笨拙地塞进其中。您以前没有使用过扰流板盒吗？不要怀有敌意——我真的很好奇，因为这对我来说很明显。我不理解一个观点，它是不明显的。哦，确实是这样。我现在使用的是

Bootstrap

框架，因为它已经包含在标记中，但是知道它很好。你实际上可以使用我提供的东西来创建你的扰流板盒（我以前没有听说过这个词）。除非您想进行某种转换，否则您实际上不必使用javascript。这是一个关于StackOverflow的类似问题的例子。这和我现在做的不同之处在于，这是一个可点击的框，而不仅仅是一个悬停的东西。所以你把状态从onHover改为onClick。只要你弄明白了。