纯纯CSS实现的当鼠标移上图片添加阴影效果代码实现的当鼠标移上图片添加阴影效果代码
个效果挺实用,当把鼠标放到一幅静止的图片上,图片的四周边框会出现阴影,具有立体感的效果,代码是第
二次修正,能适应大小不同的图片,值得大家尝试一用哦。
<title>CSS给图片添加阴
影</title>
<style>
*{padding:0;margin:0;}
body{background:#E8ED
F1;padding:20px;}
#profileAvatar
{overflow:hidden;zoom:1;
}
#profileAvatar
i{float:left;visibility:hidden
;background:url(//files.jb5
1.net/demoimg/200912/a
vatar.gif) 0 0 no-repeat;}
#profileAvatar i
i{background-
position:100% 0; }
#profileAvatar i i
i{background-position:0
100%;}
#profileAvatar i i i
i{padding:0 5px 6px
0;background-
position:100% 100%; }
#profileAvatar
img{visibility:visible;displ
ay:block;padding:3px;bor
der:1px solid
#ccc;background:#fff;}
</style>
<div id="profileAvatar">
<i><i><i><i>
<img
src="data:image/png;bas
e64,PCFET0NUWVBFIG
h0bWw+PGh0bWw+PGh
lYWQ+PG1ldGEgY2hhc
nNldD0idXRmLTgiPjxtZX
RhIGh0dHAtZXF1aXY9Il
gtVUEtQ29tcGF0aWJsZ
SIgY29udGVudD0iSUU9
ZWRnZSI+PG1ldGEgbm
FtZT0idmlld3BvcnQiIGN
vbnRlbnQ9IndpZHRoPW
RldmljZS13aWR0aCwga
W5pdGlhbC1zY2FsZT0x
Ij48dGl0bGU+NDAzIEZv
cmJpZGRlbjwvdGl0bGU
+PHN0eWxlIHR5cGU9In
RleHQvY3NzIj5ib2R5e21
hcmdpbjo1JSBhdXRvID
AgYXV0bztwYWRkaW5n
OjAgMThweH0uUHttYXJ
naW46MCAyMiV9Lk97b
WFyZ2luLXRvcDoyMHB
4fS5Oe21hcmdpbi10b3A
6MTBweH0uTXttYXJna
W46MTBweCAwIDMwc
HggMH0uTHttYXJnaW4t
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
评论0