0

我正在与设计师合作，他向我发送了我们网页上搜索栏的以下设计：

在此处输入图像描述

除非完全必要，否则我非常反对在网页设计中使用图像，所以我希望我可以在 CSS 中重新创建整个搜索栏小部件。我知道如何做边界半径、渐变、盒子阴影等，所以这不是问题。

问题：假设 CSS3 浏览器兼容，我怎样才能重新创建实际的搜索按钮（放大镜部分）具有双曲线边缘和左下角的轻微阴影？

想法：我最初的感觉是搜索按钮将是圆形且独立的，然后与搜索输入 div 以负的左边距重叠，但后来我不确定如何获得那个阴影。

编辑：我并不完全反对使用放大镜的图像，但我之前在 CSS 中看到过类似的图标。图像与纯 CSS 最终会以相同的速度加载，还是我应该在纯 CSS 中尽我所能？

4

2 回答 2

1

以不同的方式解决问题，您可以使用字体来渲染放大镜。这里有一些免费的，您可以通过 JS 或通过使用FontSquirrel 之类的服务创建 @font-face 来加载。这个附带了所有必要的文件，它包括指向任一方向的放大镜：http ://www.tenbytwenty.com/sosa.php

从那里，您应该能够使用 CSS 对其进行样式设置，以使其看起来像您的设计师想要的那样。

于 2012-11-26T16:38:49.153 回答
0

这样的事情会管理

<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>
于 2012-11-26T17:02:11.123 回答