HTML/CSS柱状图缩放问题：如何缩放柱状元素而不缩放边框？

这个问题我之前做柱状图时也碰到过！transform: scale() 确实会把元素的所有部分（包括边框）一起缩放，想要边框保持原尺寸，有几个实用的解决方案，我给你拆解一下：

方案1：嵌套元素分离边框与填充（最直观） #

把柱状条拆成两层：外层负责显示固定样式的边框，内层作为实际的填充部分。只对内层进行缩放，外层的边框就不会受到影响了。

<div class="bar-container">
  <div class="bar-fill"></div>
</div>

.bar-container {
  width: 40px;
  height: 200px; /* 柱状图的总高度 */
  border: 2px solid #333; /* 固定宽度的边框 */
  margin: 0 10px;
  position: relative;
  overflow: hidden;
}

.bar-fill {
  width: 100%;
  height: 100%;
  background-color: #4285F4;
  transform-origin: bottom center; /* 从底部开始缩放，符合柱状图增长逻辑 */
  transform: scaleY(0.6); /* 缩放填充部分到总高度的60% */
}

原理：外层.bar-container承担边框和整体高度的职责，内层.bar-fill仅负责填充颜色和高度缩放，边框完全不参与变换，自然保持原宽度。

方案2：直接修改高度（更原生的方式） #

如果你的柱状条高度是动态控制的（比如通过JS调整），完全可以不用scale，直接修改height属性。这种方式更符合CSS盒模型的逻辑，边框自然不会变形。

<div class="bar"></div>

.bar {
  width: 40px;
  height: 60%; /* 直接设置高度比例，或用具体像素值 */
  max-height: 200px; /* 柱状图的最大高度 */
  border: 2px solid #333;
  margin: 0 10px;
  background-color: #4285F4;
  align-self: flex-end; /* 配合flex布局让柱状条从底部开始 */
}

原理：用height或min-height直接控制填充高度，边框会随着元素高度自适应延伸，但边框宽度始终保持设置的固定值，不会被缩放。动态调整时，用JS修改element.style.height比修改transform更直观。

方案3：伪元素模拟边框（无额外嵌套） #

如果不想增加额外的嵌套元素，可以用伪元素绘制边框，让伪元素不参与主体元素的缩放变换。

<div class="bar"></div>

.bar {
  width: 36px; /* 总宽度减去左右边框的2px*2 */
  height: 100%;
  background-color: #4285F4;
  transform-origin: bottom center;
  transform: scaleY(0.6);
  position: relative;
  margin: 0 10px;
}

.bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  bottom: 0;
  border: 2px solid #333;
  pointer-events: none; /* 避免伪元素干扰交互 */
}

原理：主体元素的宽度预留出边框空间，伪元素定位在元素外部绘制边框，伪元素默认不继承主体的transform属性，因此边框始终保持原尺寸。

个人最推荐方案1或方案2：方案1结构分离清晰，便于维护；方案2更符合原生CSS逻辑，代码更简洁，都能完美解决边框被缩放的问题。

内容的提问来源于stack exchange，提问作者user9375768