Html 计算重叠的rgba值

例如：

如您所见，第一个元素的右边框与第二个元素的左边框重叠。发生这种情况时，它们的rgba值叠加在一起，使右边框看起来更暗

---

如果我希望右边框在与第二个元素的左边框重叠时显示其“原始”颜色，如何计算右边框所需的alpha值

好的，你加入半透明背景是有意的吗？内联块元素上的长方体模型意味着每个项目上的背景和边框已经成倍增加——这是故意的还是错误的？ 如果出现错误，而您只是询问如何将两个半透明对象叠加以获得0.5的不透明度，而第二个对象的不透明度为0.3（因此X+0.3=0.5），则需要使用0.28。 0.29表示有0.71个灯光通过。第二项设置为0.3不透明度，允许剩余71%光的70%通过。71人中70%的人接近50人

如果你需要包括背景，你会做类似的事情 项目1：背景50%+边框50%=75%不透明度。 项目2：背景30%+边框30%=51%不透明度。 项目1上需要右边框以获得所有4种颜色75%的不透明度=50%（div1背景）+X（div1右边框）+51%（div2背景和边框）。

---

这里的问题是[50%+X+51%]等于[50%+50%]X必须是一个负数，你不能有这个负数。

为什么不直接添加左边框：第二个没有边框，这样就没有可以重叠的边框了？这样你就不会有三角形出现。我只是虚构了一个例子。我不是真的在寻找css解决方案。我感兴趣的是用于计算rgba将使边界显示为原始颜色的数学（不考虑在此过程中创建的任何三角形）。

.example {

  display: inline-block;
  padding: 50px;
  background: rgba(0, 0, 0, 0.5);
  border: 25px solid rgba(0, 0, 0, 0.5);
  margin-right: -30px;
}

.example2 {

  display: inline-block;
  padding: 50px;
  background: rgba(0, 0, 0, 0.3);
  border: 25px solid rgba(0, 0, 0, 0.3);
}