代码之家 › 专栏 › 技术社区 › Mantvydas Binderis

如何淡出渐变圆的边

radial-gradients gradient css

Mantvydas Binderis · 技术社区 · 7 年前

我正在尝试实现这种渐变效果 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>

1 回复 | 直到 7 年前

vals 7 年前

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

此外,(但这是主观的)可能“白色”透明优于默认的“黑色”透明。当然,transparent不关心颜色,但过渡会关心颜色,并提供较深的颜色。

.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>

推荐文章

StatsNoob · 带tf的张量流梯度。NaN本不应该返回的地方

6 年前

Pythagyros · 使用自定义渐变填充直方图箱

6 年前

Suwash · python中带有“连续双变量”调色板的散点图[重复]

6 年前

Mantvydas Binderis · 如何淡出渐变圆的边

7 年前

alpaca · 在“tf”的输入函数中返回多个值。py\u函数`

7 年前

IOS · 对于Uiimageview,如何在ios swift4中将CGgradient背景色设置为背景色?

7 年前

Johan van den Berg · Swift UITableView中的渐变层

7 年前

Vijayadhas Chandrasekaran · 如何在android中居中渐变色

7 年前

HerrGanzorig · 如何选择渐变过滤器旁边的按钮

7 年前

Sujay U N · SVG矩形和路径渐变

7 年前