html左右阴影效果图,css实现横向菜单带阴影效果(不用滤镜实现)

这里用css实现不用滤镜实现阴影效果。代吗及详解如下:

xhtml代码：

例如：

• href="http://www.goodjob.cn/">中国俊才网中国俊才网

• href="http://www.goodjob.cn/">中国俊才网中国俊才网

• href="http://www.goodjob.cn/">中国俊才网中国俊才网

• href="http://www.goodjob.cn/">中国俊才网中国俊才网

• href="http://www.goodjob.cn/">中国俊才网中国俊才网

这里定义了一个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" "http://www.w3.org/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="http://www.goodjob.cn/">中国俊才网中国俊才网

href="http://www.goodjob.cn/">中国俊才网中国俊才网

href="http://www.goodjob.cn/">中国俊才网中国俊才网

href="http://www.goodjob.cn/">中国俊才网中国俊才网

href="http://www.goodjob.cn/">中国俊才网中国俊才网