Question

我正在努力实现这种渐变效果gradient fade out effect。如果我的cricles周围没有那些线条，我会对我的代码感到满意。如何使它们淡出以产生漂亮的渐变光泽/发光效果？我只是想摆脱那些周围的线条。（在整页上观看代码段）

.box {
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: -webkit-radial-gradient( white, transparent 75%);
  opacity: 1;
  position: absolute;
  top:-1000px;
  left:-500px;
  opacity: 0.7;
}
.box2 {
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: -webkit-radial-gradient( orange, transparent 75%);
  opacity: 1;
  position: absolute;
  top:-800px;
  right:-800px;
  opacity: 0.5;
}
body {
  background: darkblue;
  overflow: hidden;
  padding:0;
  margin:0;
}
.container {
  max-width: 1600px;
  overflow: hidden;
  position: relative;
  height: 100vh;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
  <div class="container">
    <div class="box">

    </div>
    <div class="box2">

    </div>
  </div>


  </body>
</html>

Answer 1

您看到的圆圈来自不透明度和边界半径的组合。我相信您的预期结果更接近于删除border-radius。

此外，（但这是主观的）可能“白色”透明比默认的“黑色”透明更好。当然，透明不关心颜色，但过渡确实如此，并且颜色较深。

.box {
  width: 2000px;
  height: 2000px;
  background: radial-gradient( white, rgba(255, 255, 255, 0) 75%);
  opacity: 1;
  position: absolute;
  top:-1000px;
  left:-500px;
  opacity: 0.7;
}
.box2 {
  width: 2000px;
  height: 2000px;
  background: radial-gradient( orange, rgba(255, 255, 255, 0) 75%);
  opacity: 1;
  position: absolute;
  top:-800px;
  right:-800px;
  opacity: 0.5;
}
body {
  background: darkblue;
  overflow: hidden;
  padding:0;
  margin:0;
}
.container {
  max-width: 1600px;
  overflow: hidden;
  position: relative;
  height: 100vh;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
  <div class="container">
    <div class="box">

    </div>
    <div class="box2">

    </div>
  </div>


  </body>
</html>

如何淡出渐变圆的边缘

1 个答案: