凹形矩形带有透明渐变。

Question

我需要一个简单的按钮，带有颜色渐变和透明渐变叠加，模拟光芒。在旧版本中，我只创建了带有颜色渐变（从红色到深红色）的按钮，并在按钮上设置了一个带有透明渐变（白色，不透明度为0.25至0.50）的图层。

像这个按钮：

但是我在凹陷的地平线上遇到了大问题：

我在这里标记了一个理论上的线，只是为了更好地理解。

Tryout code on fiddle:
I've been experimenting a bit with concave background settings here. But then I get no transparent history.

#wrapper {
  background: grey;
  padding: 25px;
}

#test {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-right: 25px;
    border-radius: 20px;
    background: #888888;
    background:
      radial-gradient(circle 400px at 50% 266%, rgba(0,0,250,0.1), rgba(0,0,250,0.1) 100%, red 100%);
    background-size:200px 200px, 200px 200px;
    background-position:0 0,0 0;
    background-repeat:no-repeat;
}

<div id="wrapper">
  <div id="test">B1</div>
  <div id="test">B2</div>
</div>

但是我的CSS 2技能已经过时了。因此，是否有更好的解决方案来制作我的财务按钮就成了一个问题。

有人有想法如何创建这样的按钮（就像第一张图片中的红色按钮）吗？现在可能有更现代和简单的解决方案。 - 重要的是水平线是凹形（向下）而不是凸形（椭圆向下在中间）。正如图中所示。

我必须更多地处理CSS-3和最新技术，以提高我的技能。

- Froschkoenig84

Answer 1

你可以通过一个元素和径向渐变来实现这个。

button {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 3px;
  background: radial-gradient(circle at 50% 150px, #B31609, #D5000C 69%, #DD3C3F 50%, #F0A696 100%);
}

<button></button>

- Dan Mullin

---

首先，感谢Dan。你完全正确地将所有颜色设置在一个radial-gradient()中。我稍微改了一下，但现在非常好：https://jsfiddle.net/89bf3xd0/6/ - 所以我从Dan那里学到了，我可以添加任意数量的颜色并指示它们的位置。通过这种方式，可以在底部使用第三个和第四个条目的渐变。- 我希望其他遇到这个问题的人也能从中学到很多东西。 - Froschkoenig84

Answer 2

您可以将多个渐变叠加在一起。我使用了一个透明的圆形径向渐变来淡化带有边缘的按钮，然后在其下方放置了一个线性渐变。然后，您可以使用CSS自定义属性将按钮颜色设置为任何您喜欢的颜色。以下是代码。在rgba()属性中调整不透明度值以获得所需的效果。

编辑：由于半径不能是百分比值，因此我使用了自定义属性，使按钮半径随按钮大小缩放，因此您可以使用不同宽度的按钮，并且它会正常缩放。

#wrapper {
  background: grey;
  padding: 25px;
}

.button {
    display: inline-grid;
    place-items:center;
    --width:200px;
    width: var(--width);
    aspect-ratio:1/1;
    margin-right: 25px;
    border-radius: 20px;
    --button-colour: blue;
    background:
      radial-gradient(
        circle calc(var(--width) * 4) at 50% 270%,
        transparent 50%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,1) 75%),
      linear-gradient(
        var(--button-colour),
        var(--button-colour)
      );
}

.red {
  --button-colour:red;
}

.green {
  --button-colour:green;
}

.blue {
  --button-colour:blue;
}

.small {
 --width:100px;
}

<div id="wrapper">
  <div class='red button'>Red</div>
  <div class='green button'>Green</div>
  <div class='blue button'>Blue</div>
  <div class='small blue button'>Blue</div>
</div>

- Adam

---

不错，@Adam。好的解决方案。 - Dan Mullin

非常重要的是aspect-ratio:1/1;，我以前从未在包含元素中看到过它，并且它适用于所有现代浏览器。 - 我非常喜欢它和圆形位置。 我为线性渐变添加了深色。 也许还有一种使用filter：brightness（75％）;的方法，但是使用第二个颜色会更好，这样我可以微调它。我的版本：https://jsfiddle.net/89bf3xd0/7/ - Froschkoenig84

看起来不错。我认为你比我更擅长阴影处理。我敢肯定我的眼球只配备了EGA图形硬件 :-D - Adam

那是我出生的那一年，也许我只能看到16种颜色。 :P 在我出生前5年，我开始使用C#-Core.NET开发Web后端，并且有时也涉及前端开发。但在过去的5年里，我只是开发C#.NET桌面软件，其中包括一个旧的基于窗体的ERP应用程序。这就是为什么我失去了对前端技术（如HTML、CSS、JS等）的关注。但现在ChatGPT唤醒了我，所以我尝试玩一些沙盒项目和AI内容。我有机会重新接触网络技术。如果这些项目中的任何一个获得利润，我将不得不更经常地与CSS或JS进行斗争。 :) - Froschkoenig84

@Froschkoenig84 我大学毕业后的第一份工作是为一个游戏引擎编写物理系统，该引擎可在PS2、PSP、Wii和PC上运行。奇怪的是，我发现网页开发更加令人满意。我仍然会用JavaScript制作游戏来娱乐自己。 - Dan Mullin