Css文本框外边框 |webpack css图片打包

/*设置文本框的宽度和高度*/
input[type="text"] {
width: 200px;
height: 30px;
border-radius: 5px;
}
/*设置文本框的外边框*/
input[type="text"] {
border: 2px solid #ccc;
padding: 5px;
box-shadow: 0px 0px 5px #ccc;
}
/*设置文本框的聚焦效果*/
input[type="text"]:focus {
outline: none;
border: 2px solid #007bff;
box-shadow: 0px 0px 5px #007bff;
}

首先，设置文本框的宽度和高度以及border-radius属性，来使文本框看起来更加美观。接着，大家可以使用border属性来设置文本框的外边框样式，这里大家选择了2像素的实线边框，并且在文本框的内部增加了5像素的padding。最后，使用box-shadow属性来增加文本框的立体感。

当用户聚焦到文本框上时，大家可以让文本框的外边框样式变得更加醒目。使用:focus伪类，大家可以设置文本框的外边框颜色和box-shadow属性，在用户输入文本时，边框样式依然明显，有利于用户的输入操作。