菜单与阴影效果(Menu With Shadow Effect)

菜单与阴影效果(Menu With Shadow Effect)

请参阅下图。 我想以下列风格显示一些导航项目。

我可以显示纹理框[矩形框]。 我无法在顶部和底部显示阴影效果。 阴影效果取决于文本大小。 这可能吗？ 关于如何进行的任何想法？

Please see the following image. I want to display some nav items in the following style.

I can display the texture box [rectangle box]. I could not display the shadow effect on the top and bottom. The shadow effect depends upon the text size. Is this possible to do? Any ideas on how to proceed?

最满意答案

您可以使用伪元素 - DEMO上的径向渐变来执行此操作

CSS：

ul { margin: 5em auto; padding: 0; background: silver; text-align: center; } li { display: inline-block; position: relative; margin: 1em; padding: .1em 2em; background: #414141; color: white; text-align: center; } li:before { position: absolute; top: -1.3em; right: 0; bottom: -1.3em; left: 0; background: radial-gradient(at 50% 0, rgba(0,0,0,.35), rgba(255,255,255,0)) 0 85%, radial-gradient(at 50% 100%, rgba(0,0,0,.3), rgba(255,255,255,0)) 0 15%; background-repeat: no-repeat; background-size: 100% .5em; content:''; }

编辑 ：IE9也支持的第二个版本 - DEMO

这个在列表项上使用两个伪元素，并要求列表项具有子项。

CSS：

ul { margin: 5em auto; padding: 0; background: silver; text-align: center; } li { display: inline-block; position: relative; margin: 1em; text-align: center; } li:before, li:after { position: absolute; top: -.4em; bottom: -.4em; content:''; } li:before { z-index: 2; right: 0; left: 0; box-shadow: 0 0 2em -.5em #000; } li:after { z-index: 3; right: -2em; left: -2em; background: silver; } a { position: relative; display: inline-block; padding: .1em 1.5em; background: #414141; color: white; line-height: 1.6; text-decoration: none; z-index: 4; }

You can do this using radial gradients on pseudo-elements - DEMO

CSS:

ul { margin: 5em auto; padding: 0; background: silver; text-align: center; } li { display: inline-block; position: relative; margin: 1em; padding: .1em 2em; background: #414141; color: white; text-align: center; } li:before { position: absolute; top: -1.3em; right: 0; bottom: -1.3em; left: 0; background: radial-gradient(at 50% 0, rgba(0,0,0,.35), rgba(255,255,255,0)) 0 85%, radial-gradient(at 50% 100%, rgba(0,0,0,.3), rgba(255,255,255,0)) 0 15%; background-repeat: no-repeat; background-size: 100% .5em; content:''; }

EDIT: A second version that is also supported by IE9 - DEMO

This one uses two pseudo-elements on the list item and requires that the list item has a child.

CSS:

ul { margin: 5em auto; padding: 0; background: silver; text-align: center; } li { display: inline-block; position: relative; margin: 1em; text-align: center; } li:before, li:after { position: absolute; top: -.4em; bottom: -.4em; content:''; } li:before { z-index: 2; right: 0; left: 0; box-shadow: 0 0 2em -.5em #000; } li:after { z-index: 3; right: -2em; left: -2em; background: silver; } a { position: relative; display: inline-block; padding: .1em 1.5em; background: #414141; color: white; line-height: 1.6; text-decoration: none; z-index: 4; }