【发布时间】：2021-10-27 08:58:41
【问题描述】：
我正在制作一个包含价格信息部分和立即订购按钮的部分。
这里有一个包装器 border 类，它为整个部分制作边框。
场景：
在这种情况下，请考虑该按钮因不透明度而被禁用，因此它现在看起来像这样。
.border {
border: 4px solid rgb(195, 0, 38);
border-bottom: transparent;
}
.info-card {
padding-bottom: 20px;
}
button {
background-color: rgb(195, 0, 38);
opacity: 0.5;
border-radius: 10px;
color: #fff;
padding: 5px;
}
.order-button {
margin-top: -1.5rem;
}<div class="border">
<div class="info-card">
<h1> Info Section </h1>
</div>
</div>
<div class="order-button">
<button>
Order Now
</button>
</div>但要求是边框线应该在按钮后面（而不是在按钮上方），如下图所示。
预期结果：
注意：此处包含不透明度以使按钮看起来像已禁用。
此外，上面给出的颜色各不相同，因此请不要添加任何其他颜色。
尝试增加按钮的 z-index，但在这种情况下不起作用。
【问题讨论】：
-
底部边框（如果没有替换为透明边框）已经位于按钮后面。但是，如果您给按钮不透明度，它当然会发光。你不能同时拥有它——“在后面，但不能通过”，和“按钮将具有不透明度”，这根本行不通。在这方面，z-index 也无能为力。然后使用其他东西使按钮“看起来被禁用”。
-
（好吧，我的意思是，您可以将按钮放置在一个本身具有纯色背景的元素中。但是我想这很容易与其他祖先元素的背景颜色发生冲突 - 加上你d 实际上以 solid 按钮的背景色再次结束，因此您可以从那时开始计算按钮本身的适当纯色。）
-
@CBroe，在真正的应用程序中，颜色是动态的，因此我不能指定一种特定的颜色来禁用。在这个例子中，它像红色阴影，但它可能是绿色或蓝色等......，并且真的，我们不知道框到底有什么颜色作为边框，并且基于这个我们使禁用的按钮颜色..
-
@CBroe，请在这里帮助我而不添加任何新颜色，我们如何实现使边框实际查看禁用按钮后面的东西。
-
“在真实的应用程序中，颜色是动态的，因此我不能指定一种特定的颜色来禁用” - 但是您使用的是 SASS，因此使用它提供的颜色处理功能可能是一种选择？使用不透明度来“禁用”外观是一个非常糟糕的主意，恕我直言 - 您已经遇到了可能带来的问题，所以我不会继续走这条路。