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

Question

我有这个需求：

如果满足条件 A，则我的输入元素的边框底部需要是某种颜色。如果满足条件 B，同样适用。

但是如果同时满足条件 A 和 B，我需要在输入元素的边框底部显示两种颜色。我试过使用线性渐变，但我不能让它在我输入的边框底部工作。

 .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;
}

我怎样才能做到这一点？

谢谢。

Answer 1

将其他三个边框的宽度明确设置为0px。这是因为 input 元素有一个默认的 border: 2px inset 边框（至少在 Chrome 中）并且 border-bottom 属性仅覆盖底部边框的颜色和不会重置其他边框的宽度。

.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;
    border-width: 0px 0px 2px 0px;
}

<p>
  Condition A is met:
  <input type="text" class="condition-a" />
</p>
<p>
  Condition B is met:
  <input type="text" class="condition-b" />
</p>
<p>
  Condition A and B are both met:
  <input type="text" class="condition-a-b" />
</p>

Post 你在评论中的澄清，我明白你需要其他边框保持不变，而只有底部边框有渐变效果。我不认为使用 border-image 可以产生这样的效果，因为边框图像被应用到所有方面。但是您可以使用 background-image 模仿这个，就像下面的代码片段一样。（请注意，这只是一个变通解决方案）。

.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: 2px solid transparent;
    background-image: linear-gradient(to right, #EAB226 50%, #984B43 50%);
    background-size: calc(100% + 4px) 2px; /* 4px extra to cater for 2px border on right + 2px on left */
    background-repeat: no-repeat;
    background-origin: border-box; /* make background start from border area itself instead of content/padding area */
    background-position: left bottom;
    box-sizing: border-box !important;
}

<p>
  Condition A is met:
  <input type="text" class="condition-a" />
</p>
<p>
  Condition B is met:
  <input type="text" class="condition-b" />
</p>
<p>
  Condition A and B are both met:
  <input type="text" class="condition-a-b" />
</p>

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

How to apply linear-gradient on an input on its border-bottom only?

html

css

linear-gradients