这里有新鲜出炉的精品教程,程序狗速度看过来!
它是一种用来表现 html(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS(层叠样式表) 即 级联样式表 。
这个效果挺实用,当把鼠标放到一幅静止的图片上,图片的四周边框会出现阴影,具有立体感的效果,代码是第二次修正,能适应大小不同的图片,值得大家尝试一用哦。
- <html>
- <head>
- <title>
- CSS给图片添加阴影
- </title>
- <style>
- *{padding:0;margin:0;} body{background:#E8EDF1;padding:20px;} #profileAvatar
- {overflow:hidden;zoom:1;} #profileAvatar i{float:left;visibility:hidden;background:url(http://files.jb51.net/demoimg/200912/avatar.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;display:block;padding:3px;border:1px
- solid #ccc;background:#fff;}
- </style>
- </head>
- <body>
- <div>
- <i>
- <i>
- <i>
- <i>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_18/1490192140_2231.gif"
- width="215" onmouseover="show()" onmouseout="show()" data-src="" />
- </i>
- </i>
- </i>
- </i>
- </div>
- 鼠标移上去显示圆滑的阴影
- <input type="button" value="缩小图片" onclick="document.getElementById('image').width -=10;"
- />
- </body>
- <script type="text/javascript">
- var imgBg = document.getElementById('profileAvatar').getElementsByTagName('i') function show() {
- for (i = 0; i < imgBg.length; i++) {
- if (imgBg[i].style.visibility == 'visible') imgBg[i].style.visibility = 'hidden';
- else imgBg[i].style.visibility = 'visible'
- }
- }
- </script>
- </html>
来源: http://www.phperz.com/article/17/0718/285950.html