javascript - 如何使用变换比例属性在不更改边框的情况下爆炸框的内容？

我正在尝试使用transform scale属性制作动画，以使盒子的内容更大。问题是盒子的边界也变大了。我只想更改内容的大小，但要更改边框。代码是这样的：

HTML：

<span id='box'>content</span>

CSS：

#box{
  position: absolute;
  left: 240px;
  border-bottom: 1px dashed white;
  width: 120px;
  height: 120px;
  text-align:center;
  font: bold 90px Tahoma;
  color: white;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.8s;
}
.explode{
  -webkit-transform: scale(1.2);
}

Javascript：

$('#box').addClass('explode');

因此问题是在添加类爆炸后，框的边框也会变大。有什么方法可以只扩大内容而无需更改边框。

最佳答案

由于已将边界添加到元素，因此边界也会增加，因此您可以使用类.wrap添加另一个跨度，该跨度将包含边界并且不会缩放。



CSS：

#box{
  position: absolute;
  text-align:center;
  font: bold 90px Tahoma;
  color: white;
  width: 120px;
  height: 120px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.8s;
}
.explode{
  -webkit-transform: scale(1.2);
}
#wrap{
  position: absolute;
  left: 240px;
  width: 120px;
  height: 120px;
  border-bottom: 1px dashed black;
  width: 120px;
  height: 120px;
  display:inline-block;
}