请看下图。我想以以下样式显示一些导航元素。
我可以显示纹理框[矩形框]。我无法在顶部和底部显示阴影效果。阴影效果取决于文本大小。这是可能的吗?关于如何进行的任何想法?
最佳答案
您可以使用伪元素上的径向渐变来做到这一点 - 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;
}
关于jquery - 带阴影效果的菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12032543/