CSS 圆角文本框

在本文中，我们将介绍如何使用CSS实现圆角文本框。

阅读更多：CSS 教程

什么是圆角文本框？

圆角文本框是指在边框的角上应用了圆角效果的文本框。与传统的方形文本框相比，圆角文本框更加美观和吸引人。

使用 border-radius 属性创建圆角文本框

CSS的 border-radius 属性可以用于创建圆角效果。通过指定属性值为一个长度值，可以使文本框的角变得圆润。

示例代码如下所示：

input[type="text"] {
  border-radius: 10px;
  padding: 10px;
}

上述代码将为 type 为 text 的输入框应用 10 像素的圆角效果，并添加了10像素的内边距。

修改圆角文本框的圆角大小

可以通过调整 border-radius 属性的属性值来改变圆角的大小。属性值可以是一个具体的长度值，也可以是百分比。

示例代码如下所示：

input[type="text"] {
  border-radius: 50%;
  padding: 10px;
}

上述代码将为 type 为 text 的输入框应用 50% 的圆角效果，并添加了10像素的内边距。

圆角文本框的圆角效果组合使用

border-radius属性可以同时适用于上、下、左、右四个角。我们可以使用斜杠/分隔属性值，分别表示左上、右上、右下以及左下四个角的圆角效果。

示例代码如下所示：

input[type="text"] {
  border-radius: 10px 20px 30px 40px;
  padding: 10px;
}

上述代码将为 type 为 text 的输入框应用不同大小的圆角效果，并添加了10像素的内边距。

圆角文本框的背景颜色和边框样式调整

除了圆角效果，我们还可以通过调整背景颜色和边框样式来进一步美化圆角文本框。

示例代码如下所示：

input[type="text"] {
  border-radius: 10px;
  padding: 10px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}

上述代码将为 type 为 text 的输入框应用灰色背景和细边框的样式。

圆角文本框的阴影效果添加

可以通过 box-shadow 属性为圆角文本框添加阴影效果。

示例代码如下所示：

input[type="text"] {
  border-radius: 10px;
  padding: 10px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

上述代码将为 type 为 text 的输入框添加淡灰色阴影效果。

总结

通过使用CSS的 border-radius 属性，我们可以轻松地创建漂亮的圆角文本框。通过调整属性值，我们可以改变圆角的大小和形状，同时还可以添加背景颜色、边框样式和阴影效果来进一步美化文本框。希望本文对你理解和应用CSS圆角文本框有所帮助！