调整中心径向渐变的半径

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);

---

可能的解决方案

现在，根据您希望实际渐变看起来如何，您可以使用我在以下 sn-p 中提供的三种方法中的任何一种：

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>

---

说明

上面的 sn-p 中使用了三种不同的渐变，下面是对它们的解释：

硬停止渐变：

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 圆圈的颜色保持透明。