使元素缩小时顶部 left/right 边框半径不变？

Question

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

无关

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

我不确定如何让 javascript 我的代码使用在 Whosebug 上工作（它只会给我错误），所以 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 吗？

Answer 2

呃，胡思乱想得出的答案是，不，不可能。我刚刚决定将顶部边框半径减小 5 像素（使它们变为 17 像素），这样它看起来就会正常打开或关闭。

感谢所有提供帮助的人~

使元素缩小时顶部 left/right 边框半径不变？

Make top left/right border radius not change when element is shrunk?

css

border