Html 如何仅在边界底部的输入上应用线性渐变？

我有这个要求：

如果满足条件A，则输入元素的边框底部需要为特定颜色。如果满足条件B，同样的情况也适用

但是如果条件A和B都满足，我需要在输入元素的边框底部显示这两种颜色。我尝试过使用线性渐变，但我无法使它在输入的边界底部工作

我怎样才能做到这一点

---

谢谢。

将其他三个边框的宽度明确设置为0px。这是因为有一个默认的

border:2px inset

border用于

输入

元素（至少在Chrome中），并且

border bottom

属性仅覆盖底部边框的颜色，不会重置其他边框的宽度

.condition-a{
边框底部宽度：2px！重要；
边框底色：#984B43！重要；
框大小：边框框！重要；
}
.条件b{
边框底部宽度：2px！重要；
边框底色：#EAB226！重要；
框大小：边框框！重要；
}
.条件a-b{
/*边框底部宽度：2px！重要；
边框底色：#EAB226！重要*/
边框底部：2倍纯色透明；
-moz边框图像：-moz线性渐变（左，#EAB226 50%，#984B43 50%）；
-webkit边框图像：-webkit线性渐变（左，#EAB226 50%，#984B43 50%）；
边框图像：线性渐变（向右，#EAB226 50%，#984B43 50%）；
边界图像切片：1；
框大小：边框框！重要；
边框宽度：0px 0px 2px 0px；
}

满足条件A：


满足条件B：


条件A和B均满足：

除了，我需要查看其他边界的轮廓。就像我们在条件A或BAh中看到的一样，你应该在问题中明确说明这一点。让我试试看有没有办法@Microcontroleur@Microcontroleur：在我看来，使用

边框图像

无法实现您要查找的内容，因此我添加了一个使用

背景图像

的解决方案，该解决方案可产生相同的视觉输出。这只是一个解决办法，但它可能是你目前最好的选择。太棒了！这正是我要找的。谢谢

 .condition-a {
    border-bottom-width: 2px !important;
    border-bottom-color: #984B43 !important;
    box-sizing: border-box !important;
}

.condition-b {
    border-bottom-width: 2px !important;
    border-bottom-color: #EAB226 !important;
    box-sizing: border-box !important;
}

.condition-a-b {
    /*border-bottom-width: 2px !important;
    border-bottom-color: #EAB226 !important;*/
    border-bottom: 2px solid transparent;
    -moz-border-image: -moz-linear-gradient(left, #EAB226 50%, #984B43 50%);
    -webkit-border-image: -webkit-linear-gradient(left, #EAB226 50%, #984B43 50%);
    border-image: linear-gradient(to right, #EAB226 50%, #984B43 50%);
    border-image-slice: 1;
    box-sizing: border-box !important;
}