Question

我正在尝试使用CSS3代替图片来编写http://www.cssmania.com/中的菜单。

到目前为止我的代码（＆amp;图片+样式）可以在这里找到： http://sarahjanetrading.com/js/j

我尝试使用CSS3来实现边框阴影和菜单背景以匹配http://www.cssmania.com中的那个。但它看起来并不一样。当我尝试使用图像时，它看起来几乎是完美的。但我想用CSS3来实现结果。

我尝试检查cssmania.com上的代码，但无法找到菜单边框的代码，使其看起来像它，菜单li背景。我只想要这两个函数的代码。

由于

Answer 1

我看到的主要不同的是链接的背景。原始设计上有一个微妙的渐变，而你的设计却没有。这也是为什么边框看起来不同 - 渐变是在颜色上，而不是边框上，但是你的眼睛被欺骗了。

将其添加到样式表中：

#header-mania .header {

    /* Keep everything *except* the original background */

    background: #7fa445;
    background: -moz-linear-gradient(top, #7fa445 0%, #6b9632 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fa445), color-stop(100%,#6b9632));
    background: -webkit-linear-gradient(top, #7fa445 0%,#6b9632 100%);
    background: -o-linear-gradient(top, #7fa445 0%,#6b9632 100%);
    background: -ms-linear-gradient(top, #7fa445 0%,#6b9632 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fa445', endColorstr='#6b9632',GradientType=0 );
    background: linear-gradient(top, #7fa445 0%,#6b9632 100%);
}

背景的颜色可能不准确（我觉得只是为了匹配颜色而点亮PS），但你可以使用the Ultimate CSS Gradient Generator轻松调整颜色

Answer 2

就我而言，你的菜单版本看起来并没有太大的不同，事实上，如果你检查css mania的样式表文件，他们只对元素使用text-shadow声明，其他一切都已实现与图像。希望您发现我的评论有用！

使用CSS3而不是图像来实现所需的结果

2 个答案: