css 扁平化输入框 |css的box-sizing

/*设置输入框的基本样式*/
input[type="text"], input[type="password"], textarea {
box-sizing: border-box;
border: none;
border-radius: 3px;
background-color: #fff;
/*添加阴影效果*/
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 0 0 1px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease-in-out; 
 }
/*设置输入框获取焦点时的样式变化*/
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 0 0 2px #2592f2;
outline: none;
 }
/*设置输入框的占位符样式*/
 ::placeholder {
color: #999;
font-size: 14px;
font-style: italic;
 }

采用这种扁平化的输入框样式，不仅能够带来更好的输入体验，也能够提升页面的整体可读性和美观度，让网站看起来更加现代化，具有更多的吸引力。