[分享]css中怎么把input变圆角

在网页样式设计中，圆角化元素的外观已经成为一种常见美学趋势。而在 CSS 中实现这个效果也很简单。今天我们来看一下如何使用 CSS 把 input 元素变成圆角样式。首先我们需要了解到，CSS 中可以...

在网页样式设计中，圆角化元素的外观已经成为一种常见美学趋势。而在 CSS 中实现这个效果也很简单。今天我们来看一下如何使用 CSS 把 input 元素变成圆角样式。
首先我们需要了解到，CSS 中可以使用 border-radius 属性来定义元素圆角效果。而 input 元素则属于表单元素，需要使用特殊的 CSS 属性进行设置。
接下来我们就可以来写代码了。首先，我们需要在 head 标签中添加如下的样式代码：

 <style>
        input {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            outline: none;
            font-size: 16px;
            transition: all 0.3s;
        }
    </style> 

上述代码中，我们先给 input 元素设置了一些基本样式，例如内边距、边框、字体大小等等。然后加入了一个 border-radius 属性，设置的值是 10px，表示我们要给 input 元素设置 10px 的圆角。
这时候我们发现，虽然 input 元素的边角变成了圆角，但 input 元素的样式还是带有一些默认的效果，例如蓝色的边框和默认的阴影效果。为了定制化这些效果，我们继续加入如下 CSS 样式：

 <style>
        input {
            /* ...步骤1代码... */
        }
        input:focus {
            border: 1px solid #333;
            box-shadow: 0 0 3px #ccc;
        }
    </style> 

在上述代码中，我们定义了 input 元素得到焦点时的样式，设置了和正常状态不同的边框颜色和阴影效果。
最后，我们还可以根据需要来调整 input 元素的宽度和高度。例如，我们希望 input 元素的高度变成 40px，可以使用如下 CSS 样式：

 <style>
        input {
            /* ...步骤1代码... */
            height: 40px;
        }
        input:focus {
            /* ...步骤2代码... */
        }
    </style> 

通过上述几步，我们就可以把 input 元素变成圆角效果的表单元素啦。如果你需要应用到其他元素，也可以参考类似的处理方式来实现哦~