使用CSS的文本字段的圆角矩形底部边框

Question

当我们使用bottom-border然后对其应用一些border-radius时，我们会在文本字段中获得第一个结果，如下图所示：

但是，如果我们希望border-bottom像圆角矩形一样显示，就像图像中的第二个字段一样？我正在寻找仅限于css的创意。虽然其他人也被邀请参加并考虑它。

Answer 1

您可以使用::before或::after等伪元素来模仿此边框效果。

输出图片：

工作示例：

＆＃13;

＆＃13;

.custom-input {
  padding-bottom: 10px;
  position: relative;
  width: 250px;
}

.custom-input::before {
  position: absolute;
  border-radius: 3px;
  background: black;
  height: 6px;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
}
.custom-input input {
  background: transparent;
  display: block;
  outline: none;
  border: none;
  width: 100%;
}

＆＃13;

<div class="custom-input">
  <input type="text" value="This is a text field width bottom border" />
</div>

＆＃13;

＆＃13;

＆＃13;

或者，您可以使用linear-gradient()和radial-gradient()创建3个不同的图像，并在适当的位置绘制以产生类似的效果。

这是必要的CSS：

input {
    background-image: radial-gradient(circle, black 3px, transparent 3px),
                      linear-gradient(to right, black, black),
                      radial-gradient(circle, black 3px, transparent 3px);
    background-repeat: no-repeat;
    background-size: 6px 6px, calc(100% - 8px) 6px, 6px 6px;
    background-position: left bottom, center bottom, right bottom;
}

工作示例：

＆＃13;

＆＃13;

.custom-input {
    background-image: radial-gradient(circle, black 3px, transparent 3px),
                       linear-gradient(to right, black, black),
                       radial-gradient(circle, black 3px, transparent 3px);
    background-repeat: no-repeat;
    background-size: 6px 6px, calc(100% - 8px) 6px, 6px 6px;
    background-position: left bottom, center bottom, right bottom;
    display: block;
    outline: none;
    border: none;
    width: 360px;
    height: 30px;
}

＆＃13;

<input type="text" class="custom-input" value="This is a text field width bottom border" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML元素的::after将起作用。

h1 {
    position: relative;
    width:380px;
    padding-bottom:2px;
}
h1::after {
    content: "";
    border: 4px solid #000;
    border-radius: 4px;
    height: 0px;
    font-size: 0px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0px;
    box-sizing: border-box;
}

<h1>Your Text Here..</h1>