主页 / 问题 / 1391325
Accepted
PakuPaku
Asked:2022-08-18 19:49:03 +0800 CST2022-08-18 19:49:03 +0800 CST

边界半径噪声

  • 772

这是一个带有 0px 圆角边框的简单块。但是，如果 ::after 的 z-index 较低，为什么会有噪音呢？图片中有以下3个实验：
1) ::after 200x200px background-color:white;
2) ::after 2x2px background-color:white;
3) ::after 200x200px background-color:blue 实验

实验证明：
1）由于某种原因，画出的角有一小部分，但已经隐藏了伪元素；
2）由于某种原因，在一个灯泡之后，他的z-index变小了，他在角落里留下了他的印记；
3）由于某种原因，bifor不能在后角处封闭，虽然它是一个没有圆角的实心正方形

问题：我该如何解决这个问题？我在网站上有一个元素，它通过移动伪元素来实现双重动画，但是这些噪音在角落里破坏了它。

火狐浏览器，个人电脑。

这是实验代码：

body{
    background-color:black;
}
div{
    position:relative;
    content:"";
    margin:50px;
    height:200px;
    width:200px;
    border-radius:50px;
    background-color:white;
    overflow:hidden;
    border:0;
}
div::before{
    content:"";
    position:absolute;
    z-index:2;
    width:200px;
    height:200px;
    top:0;
    left:0;
    background-color:blue;
    border:0;
}
div::after{
    content:"";
    position:absolute;
    z-index:1;
    width:200px;
    height:200px;
    top:0;
    left:0;
    background-color:white;
    border:0;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="qb1">
    </div>
</body>
</html>

css

1 个回答

  1. Best Answer

    如果不使用 ::after （在我的情况下， ::before 通过线性渐变将其变为双色），则可以解决它，使主块透明（感谢提示），并将内容放在另一个块中它比父代略小，边缘有几个像素的缩进。然后角落会很干净。

    • 0

相关问题