javascript - 使用 CSS 或 javascript/jQuery，我将使用哪种方法使我的网站的导航栏看起来更 3d-ish？

Question

我看到很多公司顶部的灰色条看起来有点“圆”而不是扁平。我猜它不仅仅是background: grey在css中？我怎样才能让它看起来像弹出一点点？

Answer 1

为现代浏览器使用 CSS Gradients。您可以在这样的网站上生成代码：http: //gradients.glrzad.com/

background-image: linear-gradient(bottom, rgb(84,72,179) 38%, rgb(100,199,217) 78%);
background-image: -o-linear-gradient(bottom, rgb(84,72,179) 38%, rgb(100,199,217) 78%);
background-image: -moz-linear-gradient(bottom, rgb(84,72,179) 38%, rgb(100,199,217) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(84,72,179) 38%, rgb(100,199,217) 78%);
background-image: -ms-linear-gradient(bottom, rgb(84,72,179) 38%, rgb(100,199,217) 78%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.38, rgb(84,72,179)),
    color-stop(0.78, rgb(100,199,217))
);

您还可以查看圆形边缘的 CSS 边框半径代码。这个网站会给你代码http://border-radius.com/

对于不支持 CSS Gradients 的旧浏览器，您需要查看背景图像或其他内容。

更新

正如handsofaten所指出的，css3pie.com 可用于在使用现代 css 时为旧版浏览器提供支持。

Answer 2

我肯定会选择 css3，现在大多数人都使用足够现代的浏览器来充分利用 css3 属性。box-shadows、text-shadows、透明度、边框和更多的好东西，用 css3 构建真正时尚的网站。查看www.css3.info中的一些示例。

Answer 3

我会选择框阴影和圆形边框（边框半径）的组合。添加渐变也是获得清新外观的好方法。