如何创建渐变色答案

【问题标题】：How to create gradient color如何创建渐变色
【发布时间】：2017-06-28 04:05:07
【问题描述】：

我需要像下图一样创建背景颜色。如何使用渐变来实现这种背景颜色？

注意：该图片只是背景颜色，不需要针、勾和标签。

【问题讨论】：

看起来您正在寻找径向渐变。 maybe this helps。你也想要那些闪亮的亮点吗？（IMO，它们看起来很糟糕）
@RicoKahler 谢谢会检查（y）

标签： css gradient linear-gradients

【解决方案1】：

您可以通过radial-gradient获取。

下面我发布了一个工作示例来获取它，您可以使用radial-gradient 属性来了解它是如何工作的。

Working fiddle

Radial gradient

.round {
  width:300px;
  height:300px;
  border-radius:50%;
  background: rgba(0,0,0,0.8);
  background-image:radial-gradient(circle at 50% 30%,#cacaca,#333);
  -webkit-background-image:radial-gradient(circle at 50% 30%,#cacaca,#333);
  position:relative;
  overflow:hidden;
}

.round:after, .round:before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  border-radius:50%;
}
.round:before {
  left:0;
  top:30px;
  transform: rotate(22deg);
  transform-origin: -13% 52%;
  -webkit-transform-origin: -13% 52%;
  background-image: radial-gradient(circle at -11% 30%,#333,#999);
  background-image: -webkit-radial-gradient(circle at -11% 30%,#333,#999);
  opacity:0.2;
}

.round:after {
  right:0;
  top:30px;
  transform: rotate(22deg);
  transform-origin: 22% 125%;
  -webkit-transform-origin: 22% 125%;
  background-image: radial-gradient(circle at -45% 30%,#999,#333);
  -webkit-background-image: radial-gradient(circle at -45% 30%,#999,#333);
  opacity:0.2;
}

&lt;div class="round"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

关了吧？

如果您需要更全面的 CSS 分解，请告诉我，但就我个人而言，我之前从未在 CSS 中使用过径向渐变，但它似乎效果很好。

Here's what I used as a reference.

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

.radial-gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  border-style: soild;
  border-width: 5px;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 30% , #C3C3C3 0%, #000000 100%);
}

<div class="container">
  <div class="radial-gradient">
  </div>
</div>

【讨论】：

【解决方案3】：

我可以使用radial gradient 或box-shadow 属性产生类似的效果。

注意 1：不同浏览器的渐变为 rendered differently。

注意2：box-shadow属性中的blur太多是bad for performance

示例（可能需要对您进行一些微调）：

.circle {
  height: 250px;
  width: 250px;
  border-radius: 100vw;
  background: white;
  margin: 1em auto;
}

.gradient {
  background-position: -55px -86px;
  background-image: radial-gradient(circle, rgb(249, 249, 249) -4%, #000000 81%);
  background-repeat: no-repeat;
  background-size: 136%;
}

.box-shadow {
  box-shadow: inset -7px -28px 140px 48px rgba(0, 0, 0, 0.75);
}

.sample {
  text-align: center;
  border: 1px solid #444;
  width: 300px;
  margin: 1em;
}

<div class="sample">Gradient
  <div class="circle gradient"></div>
</div>
<div class="sample">Box-shadow
  <div class="circle box-shadow"></div>
</div>

推荐？在这种情况下使用图片而不是 CSS。

【讨论】：