如何创建渐变颜色

我需要创建背景颜色，就像下面的图像..如何使用渐变实现此背景颜色？如何创建渐变颜色

注意：只是该图片的背景颜色无需针，刻度线和标签。

2017-06-28 Akbar Basha

看起来你正在寻找一个径向渐变。 [也许这有助于]（https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient）。你也想要那些闪亮的亮点？（国际海事组织，他们看起来不好） –

@RicoKahler谢谢你会检查（y） –

Close eh？

让我知道如果你需要更完整的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>

来源

2017-06-28 04:34:08

我能够产生使用一个radial gradient或属性类似的效果。

注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。

来源

2017-06-28 05:17:37

您可以使用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; 
 
}

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

来源

2017-06-28 05:40:43 LKG

如何创建渐变颜色

回答

相关问题