时间：2021-07-01 10:21:17 帮助过：222人阅读
css阴影效果具体代码示例如下：
<style>
.shadow{
float:left;
margin-left:20px;
background: #EEFF99;
width:200px;
height:400px;
}
.shadow:hover{
-webkit-box-shadow: #ccc 0px 10px 10px;
-moz-box-shadow: #ccc 0px 10px 10px;
box-shadow: #ccc 0px 10px 10px; }
</style>
</head>
<body>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</body>以上的代码测试效果css阴影边框如下图：
注：无论是给那个元素加阴影都离不开一个重要的属性 :hover 伪类。
:hover 伪类就是在鼠标移到元素上时向此元素添加特殊的样式。只要你掌握了这个hover的使用方法，无论是给div块还是图片加阴影都可以轻松实现这样的效果。
这个伪类是应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。
【相关内容推荐】
在页面中怎么用css让图片有立体感的效果?（代码实测）
html5极速3D立体式图片相册切换效果
以上就是css怎么实现鼠标移动到div块时自动加阴影效果？的详细内容，更多请关注Gxl网其它相关文章！