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

Question

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

但是如果我们希望 border-bottom 像图像中的第二个字段那样显示为圆角矩形怎么办？我正在寻找仅限于 css 的想法。尽管其他人也被邀请参与和思考。

Answer 1

您可以使用像 ::before 或 ::after 这样的伪元素来模仿这种边框效果。

输出图像：

工作示例：

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

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

或者您可以使用 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;
}

工作示例：

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

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

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>

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

Rounded rectangular bottom border of text field using CSS

css

border

css-shapes