这里用css实现不用滤镜实现阴影效果。代吗及详解如下:
xhtml代码:
例如:
href="/">中国俊才网中国俊才网
href="/">中国俊才网中国俊才网
href="/">中国俊才网中国俊才网
href="/">中国俊才网中国俊才网
href="/">中国俊才网中国俊才网
这里定义了一个id为menu的无序列表作为菜单的容器,里面的列表项li就是菜单栏了。这里在列表项li中的链接a标签内,放置了一个内联对象span,它就是阴影效果载体,我们通过CSS定义,实现阴影效果。
CSS代码:例如:
#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #bbb;
}
#menu li {
float:left;
width:8em;
height:2em;
line-height:2em;
border-right:1px solid #bbb;
position:relative;
text-align:center;
}
这里定义menu这个无序列表的填充与边距均为零。高度为2em。清除默认列表项预设标记。定义菜单中的列表项为向左浮动,宽度与高度分别是2em。行高为2em,实现了文字的垂直居中。设置相对定位,并设置文字水平居中对齐。
请注重:我们给ul设置了左边框为1px的实线,颜色是灰色。border-left:1px
solid #bbb; 我们给li设置了右边框为1px的实绩,颜色是灰色。border-right:1px solid #bbb;
这样就实现了左右都存在分割的线条了。
例如:
#menu li a, #menu li a:visited { display:block;
text-decoration:none; color:#000;}
#menu li a span, #menu li a:visited span { display:none; }
我们定义链接的link与visited状态的样式,设置块元素,没有装饰线,颜色为#000;并且在link与visited状态下链接元素内的span元素为不可见:display:none。例如:
#menu li a:hover { border:0; color:#bbb;}
#menu li a:hover span { display:block; width:8em; height:2em;
text-align:center; position:absolute; left:-1px; top:-2px;
color:#000; cursor:pointer; }
在hover鼠标悬停时,链接的文字颜色为#bbb。即阴影文字的颜色。而此时span内联元素中的文字的设置发生了巨大的变化,我们来看代码。设置成块元素,宽度与高度分别是8em、2em。文字水平居中对齐,采用绝对定位,距左与距顶分别是-1px、-2px。文字颜色为黑色,鼠标指点为:pointer。
实现的原理与思路小结:在正常状态下,链接内的文字是黑色的,而链接span元素内的文字是不可见的。当鼠标悬停时。将链接文字设置为淡灰色的阴影,链接span元素内的文字设置成黑色,并且其位置向左及向上略移一点点。这样就实现了这款菜单的效果。
我们看完整的CSS代码:
/p>
Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
css实现阴影效果(不用滤镜实现)
#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #bbb;
}
#menu li {
float:left;
width:8em;
height:2em;
line-height:2em;
border-right:1px solid #bbb;
position:relative;
text-align:center;
}
#menu li a, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
}
#menu li a span, #menu li a:visited span {
display:none;
}
#menu li a:hover {
border:0;
color:#bbb;
}
#menu li a:hover span {
display:block;
width:8em;
height:2em;
text-align:center;
position:absolute;
left:-1px;
top:-2px;
color:#000;
cursor:pointer;
}
id="menu">
href="/">中国俊才网中国俊才网
href="/">中国俊才网中国俊才网
href="/">中国俊才网中国俊才网
href="/">中国俊才网中国俊才网
href="/">中国俊才网中国俊才网
如果觉得《html左右阴影效果图 css实现横向菜单带阴影效果(不用滤镜实现)》对你有帮助,请点赞、收藏,并留下你的观点哦!