如何创建渐变色

Question

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

注意：该图片的背景颜色不需要针，刻度和标签。

Answer 1

您可以使用radial-gradient来获取它。

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

<强> Working fiddle

<强> Radial gradient

＆＃13;

＆＃13;

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

＆＃13;

<div class="round"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

关闭呃？

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

Here's what I used as a reference.

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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

注意2 ：blur媒体资源中的box-shadow太多bad for performance

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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