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。这是因为border: 2px inset元素的默认input边框（至少在Chrome中），border-bottom属性仅覆盖底部边框的颜色，并且不会重置宽度其他边界。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在评论中发布您的说明，我知道您需要其他边框保持不变，而只有底部边框具有渐变效果。我认为这种效果可以使用border-image生成，因为边框图像应用于所有边。但你可以使用下面代码段中的background-image来模仿这个。（请注意，这只是一种解决方案）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: