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.05m的“比例100％”，“比例80％”不是用0.05 * 80/100的公式计算的。当然，两个单独元素的增长或收缩率并不完全吻合。

不幸的是，浏览器具有这样的能力。因为在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>

正如我上面提到的，好像有两个重叠的阴影。但这只与浏览器有关。如果距离太近，实际上看起来更平滑。