CSS将input框成一条横线

CSS是一门非常强大的技术，可以让我们较为轻松地实现各种各样的效果。今天我们来谈谈如何将input框变成一条横线。

input {
  border: none;
  border-bottom: 1px solid #333;
}

上述CSS代码给了我们一个结论，就是通过将input的边框去掉（border:none;），然后再添加下边框（border-bottom:1px solid #333;），就可以让input框变成一条横线。

当然，我们还可以继续优化这段代码，比如增加hover时的效果。我们可以利用:hover伪类，让鼠标悬停在input框上时，下边框变成另外一种颜色：

input {
  border: none;
  border-bottom: 1px solid #333;
}

input:hover {
  border-color: #666;
}

上述代码中，我们利用input:hover表示鼠标悬停在input框上时，所有下边框的颜色变为#666。这样，当用户悬停在input框上时，界面更加友好，交互效果更加丰富。

当然，我们还可以利用这个技巧去实现一些更加复杂的效果。比如，我们可以利用这个技巧定制登录框、注册框、搜索框等表单样式，让我们的网站更加美观、实用。

总之，CSS的应用范围非常广泛，非常有趣，希望大家能够多多尝试，多多实践，不断提高我们的技能。