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放在复制效果
它看起来应该像最左边的 Firefox
最佳答案
您可以通过使用 3d 变换强制激活硬件加速来消除视觉伪影:
transform: rotate3D(0, 0, 1, 180deg);
不确定为什么它会在 Chrome 上发生，一定是最近引入的错误。
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>关于css - css 模糊了 chrome 中的框边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/77471538/