css 百度搜索框 |css 滚动条按钮

/* 设置搜索框的宽度 */
#wrapper {
width: 500px;
margin: 0 auto;
}
/* 设置搜索框的样式 */
#search-box {
width: 100%;
height: 40px;
line-height: 40px;
border: none;
outline: none;
padding: 0 10px;
font-size: 16px;
border-radius: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
background: #f2f2f2;
}
/* 设置搜索按钮的样式 */
#search-btn {
width: 60px;
height: 40px;
line-height: 40px;
border: none;
outline: none;
background: #3385ff;
color: #fff;
font-size: 16px;
border-radius: 0 20px 20px 0;
cursor: pointer;
}

以上代码设置了搜索框的宽度、样式和搜索按钮的样式。其中，搜索框的样式包括宽度、高度、边框、内边距、字体大小、背景色等。同时，还设置了阴影效果，让搜索框看起来更有立体感。搜索按钮的样式包括宽度、高度、背景色、字体颜色和圆角等，让搜索按钮更加美观。

通过上述代码，大家可以轻松地实现一个类似百度搜索框的样式。学会使用CSS来实现页面元素的样式，对于前端开发来说，是非常重要的。