CSS模糊了Chrome中的框边框

brccelvz 于 2023-11-14 发布在 Go

关注(0)|答案(1)|浏览(88)

的数据

body {
  font-family: sans-serif;
}
p {
  column-fill: balance;
  column-count: 2;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  filter: blur(5px);
  z-index: -1;
  animation: move 15s linear infinite;
}
.box2 {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.box2::before {
  content: " ";
  position: absolute;
  top: -0px;
  left: -0px;
  bottom: -0px;
  right: -0px;
  background-image: conic-gradient(
    from 36deg at 20% 80%,
    #a100ffff 0% 25%,
    #000000 25% 30%,
    #119cfdff 30% 50%
  );

  filter: blur(500px);
  z-index: -1;
  animation: move 15s linear infinite;
}
@keyframes move {
  from {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(540deg);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <script src="src/index.js"></script>
    <link rel="stylesheet" type="text/css" href="src/styles.css" />
    <div>
      <div class="box">1<br />12</div>
      <div class="box2">1<br />12</div>
    </div>
  </body>
</html>

它应该看起来像最左边的Firefox，但最近，它显示了奇怪的线框。是的，这不是一段时间前的情况。
我把代码放在codesandbox里来复制效果
https://codesandbox.io/
它应该看起来像最左边的Firefox

google-chrome

来源：https://stackoverflow.com/questions/77471538/the-css-blurs-the-box-border-in-chrome

1条答案

按热度按时间

bfhwhh0e1#

你可以通过使用3d变换来强制激活硬件加速，以消除视觉伪影：

transform: rotate3D(0, 0, 1, 180deg);

字符串
不知道为什么会发生在Chrome上，一定是最近引入的一个bug。

body {
  font-family: sans-serif;
}
p {
  column-fill: balance;
  column-count: 2;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  filter: blur(5px);
  z-index: -1;
  animation: move 15s linear infinite;
}
.box2 {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.box2::before {
  content: " ";
  position: absolute;
  top: -0px;
  left: -0px;
  bottom: -0px;
  right: -0px;
  background-image: conic-gradient(
    from 36deg at 20% 80%,
    #a100ffff 0% 25%,
    #000000 25.5% 30%,
    #119cfdff 30.5% 50%
  );

  filter: blur(500px);
  background-color: white;
  z-index: -1;
  animation: move 15s linear infinite;
}
@keyframes move {
  from {
    transform: rotate3D(0, 0, 1, 180deg);
  }

  to {
    transform: rotate3D(0, 0, 1, 540deg);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <script src="src/index.js"></script>
    <link rel="stylesheet" type="text/css" href="src/styles.css" />
    <div>
      <div class="box">1<br />12</div>
      <div class="box2">1<br />12</div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-11-14

我来回答

CSS模糊了Chrome中的框边框

1条答案

相关问题

热门标签

最新问答