提问人：Zhiqiang Du 提问时间：11/13/2023 最后编辑：Hao WuZhiqiang Du 更新时间：11/13/2023 访问量：117
css 模糊了 chrome 中的框边框
The css blurs the box border in 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% 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
答：
2赞
Hao Wu
11/13/2023
#1
您可以通过使用 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>
评论