css - 使元素缩小时左上/右上边框半径不变？

Question

为我的网站准备一个相当简单的剧透代码。它有一些大的边界半径，当元素展开时这很好，但当缩小时就不那么好了。有什么方法可以让底部边框半径在缩小时变为 0px，还是这与 CSS 无关？

是的，我希望它成为一个 CSS 解决方案。必须缩小边界半径对我来说不是真正的问题，但你知道，如果可能的话，也可以尝试不这样做。

我不确定如何让我的代码使用的 javascript 在 stackoverflow 上工作(它只会给我错误)，所以 here是展开后的截图。

.panel {
  background-color: #F9F9F9;
  border: 1px solid gray;
  border-radius: 22px 22px 10px 10px;
  font-family:arial;
}

.panel>h3 {
  font-size:14px;
  background-color:#820D1A;
  color:#ededed;
  border-bottom:1px solid #000;
  text-align:left;
  padding:4px;
  padding-left:20px;
  margin:0px;
  border-radius: 21px 21px 0px 0px;
}

.panel>div {
  padding:4px;
}

.panel>div:after {
  display: block;
  clear: both;
}

<div class="panel">
   <h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
  <div style="display:none">(PARAM2)</div>
</div>

Answer 1

.panel {
	background-color: #820D1A;
	border: 1px solid gray;
	border-radius: 22px 22px 10px 10px;
	font-family: arial;
}

.panel>h3 {
  font-size:14px;
  color:#ededed;
  text-align:left;
  padding-left:20px;
  margin:5px;
}

.panel>div {
  padding:4px;
	background-color: #FFF;
}

.panel>div:after {
  display: block;
  clear: both;
}

<div class="panel">
   <h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
	  <div style="display: none">(PARAM2)</div>
</div>

这看起来更接近您要实现的目标吗？ h3 上有两个填充规则，我想知道为什么您也有相关背景？这不适用于您的 Javascript 吗？