调整居中径向渐变的半径

Question

我正在重新设计我当前的项目，并找到一种简单的方法来淡化我的div背景的左右边缘，方法是使用以下内容。我一直在尝试编辑中心圆的半径，使其变小。如果没有整个渐变样式消失，我似乎无法改变它。

我正在尝试将黄色区域设置为文本的背景，逐渐淡化为透明。我需要做些什么来获得更透明和更少彩色的圆圈？

  background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -o-radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent);

Answer 1

调整径向渐变半径的方法是指定颜色停止百分比。也就是说，我们需要指定一种颜色必须结束的位置，另一种颜色必须开始。

在您提到的渐变中，没有提到颜色停止百分比，因此从元素中心绘制的每个圆的颜色从#ffeda3进展到透明。

background-image: radial-gradient(center center, circle cover, #ffeda3, transparent);

可能的解决方案

现在，根据您希望实际渐变的样子，您可以使用我在下面的代码段中提供的三种方法中的任何一种：

div.hard-stop {
  text-align: center;
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);  
  background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);
}

div.gradual-1 {
  text-align: center;
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, transparent 30%);  
  background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);
}

div.gradual-2 {
  text-align: center;
  background-image: -moz-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
  background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);  
  background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);
}

/* Just for demo */
body {
  background: black;
}
div{
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="hard-stop">
  <a href="#">Test</a>
  <a href="#">Test 2</a>
  <a href="#">Test 3</a>
</div>

<div class="gradual-1">
  <a href="#">Test</a>
  <a href="#">Test 2</a>
  <a href="#">Test 3</a>
</div>

<div class="gradual-2">
  <a href="#">Test</a>
  <a href="#">Test 2</a>
  <a href="#">Test 3</a>
</div>

解释

上面的代码段中使用了三种不同的渐变，下面是对每种渐变的解释：

难以停止的渐变：

background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 30%);

这是一个难以停止的渐变。也就是说，直到30％的父元素，所有1px圆圈都是颜色#ffeda3，之后所有1px圆圈都是透明的。正如您所看到的那样，在30％标记处有颜色的硬切换。

渐进 - 1：

background-image: radial-gradient(center center, circle cover, #ffeda3, transparent 30%);

这是一个渐进的运动，直到达到透明度。第一个1px圆圈具有颜色#ffeda3，并且在确定之后每个1px圆的颜色使得30％标记颜色变为透明。在30％之后，渐变的颜色保持透明。

渐进 - 2：

background-image: radial-gradient(center center, circle cover, #ffeda3 30%, transparent 35%);

此渐变的颜色为#ffeda3，从第一个1px圆到容器的30％。从30％标记到35％标记，每个1px圆圈的颜色从#ffeda3逐渐变为透明。从35％开始，每个1px圆圈的颜色保持透明。