Question

为我的网站提供一个相当简单的扰码代码。它有一些大的边界半径，当元素扩展时很好，但收缩时则不是很多。有没有什么方法可以让底部边框半径缩小时缩小到0px，或者那只是CSS的东西？

我会，是的，喜欢它是一个CSS解决方案。对于我来说，缩小边界半径并不是一个真正的问题，但你知道，如果可能的话，不妨试着去。

我不确定如何使我的代码使用javascript我的代码在stackoverflow上工作（它只是给我错误），所以here是它看起来像扩展的截图。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

哎呀，在搞乱之后，我得到的答案是，不，这是不可能的。我只是决定将顶部边框半径减少5个像素（使它们为17像素），以便它看起来正常打开或关闭。

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

当元素缩小时，左上/右边框半径不会改变？

2 个答案: