CSS转换：比例尺未对齐重叠的div

Question

我创建了一个CSS功能区，在第一个功能区的正后方有另一个CSS功能区，以用作阴影。

我正在尝试将两者同时扩展。

我将色带包裹在div中，并将transform: scale应用于此父div。它们没有像预期的那样增加或缩小色带，而是变得未对齐。

应用scale时，色带不对齐的原因是什么？如何解决？

.container {
  align-items: center;
  display: flex;
  justify-content: center;
}
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container {
  transform: scale(0.8);
}
.bookmark,
.bookmark-shadow {
  border: 0.7em solid;
  border-bottom-color: transparent;
  box-shadow: 0 -1em;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 0;
  text-align: center;
  vertical-align: middle;
  width: 0;
}
.bookmark {
  color: #337ab7;
  position: relative;
  z-index: 10;
}
.bookmark-shadow {
  border: 0.75em solid;
  border-bottom-color: transparent;
  color: rgba(64, 64, 64, 0.5);
  margin-left: -0.05em;
  position: absolute;
  top: 0.9em;
  z-index: 5;
}

<div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
</div>

Answer 1

孩子们

更改元素的大小，而不是父元素。这样可以得到更准确的结果。

.container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container div {
  transform: scale(0.8);
}

.bookmark,
.bookmark-shadow {
  border: 0.7em solid;
  border-bottom-color: transparent;
  box-shadow: 0 -1em;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 0;
  text-align: center;
  vertical-align: middle;
  width: 0;
}

.bookmark {
  color: #337ab7;
  position: relative;
  z-index: 10;
}

.bookmark-shadow {
  border: 0.75em solid;
  border-bottom-color: transparent;
  color: rgba(64, 64, 64, 0.5);
  margin-left: -0.05em;
  position: absolute;
  top: 0.9em;
  z-index: 5;
}

<div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
</div>

事实上，这里的元素没有连接到端到端。因此，可以在数学上将".7em"的值作为".75em"来计算".05em"的值。但是，在输入尺寸标注后，浏览器会舍入一些值。因此，无法使用0.05 * 80/100的公式来计算“ Scale 100％”，“ scale 80％”中的0.05em。自然，两个元素的增长率或收缩率都不完全吻合。

不幸的是，浏览器具有这种能力。因为也有可能以SVG格式看到相同的内容。如果point没有相互连接，则两个“不同”的比例将得出不同的结果。

另一个：受父母限制

为了获得准确的结果，使用嵌套的元素会更有意义。 ::before ::after 这会将您作为“书签”的元素返回。

.container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container {
  transform: scale(0.8);
}

.bookmark {
  box-sizing: border-box;
  color: #337ab7;
  cursor: pointer;
  display: inline-block;
  height: 0;
  box-shadow: 0 -1em;
  text-align: center;
  vertical-align: middle;
  width: 0;
  position: relative;
}

.bookmark::before {
  content: "";
  color: #337ab7;
  box-shadow: 0 -1em;
  border: 0.7em solid;
  border-bottom-color: transparent;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 10;
}

.bookmark::after {
  content: "";
  color: rgba(64, 64, 64, 0.5);
  border: 0.75em solid;
  box-shadow: 0 -1em;
  border-bottom-color: transparent;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 5;
}

<div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
  </div>
</div>

如上所述，似乎有两个重叠的阴影。但这仅与浏览器有关。如果距离太近，实际上会使您看起来更流畅。