插入 Box-Shadow 和变换的问题：Chrome 上的 Scale()答案

【问题标题】：Issue with inset Box-Shadow and Transform: Scale() on Chrome插入 Box-Shadow 和变换的问题：Chrome 上的 Scale()
【发布时间】：2018-08-04 00:55:22
【问题描述】：

我需要使用 inset Box-Shadow 来模拟边框，因为如果它们有不同的颜色，我需要控制水平/垂直边框如何重叠。

这里我只有一个顶部边框。但是，Scale() 和某些偏移量会导致出现右/左边框。这会发生在 Chrome 上，但不会发生在 IE 或 Edge 上。

Screenshot

我知道这与子像素有关。有缓解措施吗？同样，CSS 边框对我来说不是一个选项。

.element {
  position: absolute;
  left: 22px;
  top: 20px;
  width: 100px;
  height: 100px;
  background: yellow;
  box-shadow: inset 0 1px 0 0 red;
  padding: 5px;
  box-sizing: border-box;
}

.container {
  background: white;
  transform: scale(1.2);
  width: 200px;
  height: 200px;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="element">ABCD</div>
    </div>
  </body>
</html>

谢谢！

【问题讨论】：

标签： html css shadowbox

【解决方案1】：

如果您不能在.element 上使用边框，那么为什么不创建一个伪元素来应用边框呢？ transform: scale() 不会改变它的外观。

*,
*::before {
  box-sizing: border-box;
}

.container {
  background: white;
  transform: scale(1.2);
  width: 200px;
  height: 200px;
}

.element {
  position: absolute;
  left: 22px;
  top: 20px;
  width: 100px;
  height: 100px;
  background: yellow;
  padding: 5px;
}

.element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid red;
}

<div class="container">
  <div class="element">ABCD</div>
</div>

【讨论】：