Css 无图像、自定义样式的搜索栏
我正在与设计师合作，他向我发送了我们网页上搜索栏的以下设计： 我非常反对在网页设计中使用图像，除非完全必要，所以我希望我可以用CSS重新创建整个搜索栏小部件。我知道如何做边界半径，梯度，框阴影等，所以这不是一个问题 问题：假设CSS3浏览器兼容，我如何重新创建实际的搜索按钮（放大镜部分），该按钮的边缘为双曲线，左下角有轻微的阴影 想法：我最初的感觉是，搜索按钮将是圆形的、独立的，然后与搜索输入div重叠，并留有一个负的左边距，但我不确定如何获得阴影Css 无图像、自定义样式的搜索栏,css,Css,我正在与设计师合作，他向我发送了我们网页上搜索栏的以下设计： 我非常反对在网页设计中使用图像，除非完全必要，所以我希望我可以用CSS重新创建整个搜索栏小部件。我知道如何做边界半径，梯度，框阴影等，所以这不是一个问题 问题：假设CSS3浏览器兼容，我如何重新创建实际的搜索按钮（放大镜部分），该按钮的边缘为双曲线，左下角有轻微的阴影 想法：我最初的感觉是，搜索按钮将是圆形的、独立的，然后与搜索输入div重叠，并留有一个负的左边距，但我不确定如何获得阴影 编辑：我并不完全反对使用图像作为放大镜，但我
编辑：我并不完全反对使用图像作为放大镜，但我以前在CSS中看到过一个新的例子。图像与纯CSS的加载速度是否相同，或者我应该在纯CSS中尽我所能吗？用另一种方法解决问题，可以使用字体渲染放大镜。有一些免费的，你可以通过JS或者通过创建一个@font-face来加载，比如。这一个附带了执行此操作所需的所有文件，其中包括指向任意方向的放大镜：
从这里开始，您应该能够使用CSS对其进行样式设置，使其看起来符合您的设计师的要求 像这样的东西会管用的
<style type="text/css">
form {
background-image: url(1noty.png);
height: 50px;
width: 240px;
}
input {
background-image: url(bg.png);
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 17px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
</style>
形式{
背景图片：url（1noty.png）；
高度：50px；
宽度：240px；
}
输入{
背景图片：url（bg.png）；
边缘顶部：15px；
右边距：15px；
边缘底部：15px；
左边距：17px；
边框顶部样式：无；
右边框样式：无；
边框底部样式：无；
左边框样式：无；
}