html – 输入带有半高的边框

概述我需要创建一个带有底部边框的输入文本框,侧边框应该跨越左右两侧输入的高度的一半. 有一种简单的方法可以在CSS中设计它吗？ 图片如下所示： 也许这可能是一个优雅的解决方案. 如果您使用背景,那么您可以非常精确地指定它的位置,并且它可以提高可读性. input[type="text"] { padding: 10px; background: linear-gradient(#000, # 我需要创建一个带有底部边框的输入文本框,侧边框应该跨越左右两侧输入的高度的一半.

有一种简单的方法可以在CSS中设计它吗？

图片如下所示：

解决方法 也许这可能是一个优雅的解决方案.

如果您使用背景,那么您可以非常精确地指定它的位置,并且它可以提高可读性.

input[type="text"] {  padding: 10px;  background: linear-gradIEnt(#000,#000),linear-gradIEnt(#000,#000);  background-size: 1px 20%,100% 1px,1px 20%;  background-position: bottom left,bottom center,bottom right;  background-repeat: no-repeat;  border: none;  color: #999;}

<input type="text" />

总结

以上是内存溢出为你收集整理的html – 输入带有半高的边框全部内容，希望文章能够帮你解决html – 输入带有半高的边框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。