纯CSS实现鼠标移上图片添加阴影效果

最新推荐文章于 2022-06-08 09:00:00 发布

JavaWeb-FaceStrap

最新推荐文章于 2022-06-08 09:00:00 发布

阅读量4.7k

点赞数

分类专栏：其他类别

本文链接：https://blog.csdn.net/qq_35546160/article/details/51879399

版权

这篇博客展示了如何使用纯CSS实现鼠标移上图片时添加阴影效果。通过CSS选择器和伪类，作者创建了一个简单的HTML结构，并利用JavaScript进行交互控制，实现阴影的显示与隐藏。读者可以学习到如何在不依赖JavaScript的情况下，通过CSS增强图片的视觉体验。

摘要由CSDN通过智能技术生成

<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(/jscss/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 id="profileAvatar">
<i><i><i><i>
<a href="http://www.codefans.net"><img src="wall_s3.jpg" w