css怎么实现鼠标移动到div块时自动加阴影效果？

时间：2025-04-05 19:06:01

我们在浏览各大网站时，点击其中的图片可能会出现放大或者旋转等等的特效。这种效果的确能让人眼前一亮，也就可能带来用户点击的流量。当然强大的css功能不仅仅只有这样特效。本篇文章就给大家介绍一种更加酷炫的特效即当鼠标移入div块时产生的css阴影效果，这样就能立即产生立体感。
css阴影效果具体代码示例如下：

<style>
        .shadow{
            float:left;
            margin-left:20px;
            background: #EEFF99;
             transition-duration: 0.5s; //停留时间显示
            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>

注：无论是给那个元素加阴影都离不开一个重要的属性 :hover 伪类。

:hover 伪类就是在鼠标移到元素上时向此元素添加特殊的样式。只要你掌握了这个hover的使用方法，无论是给div块还是图片加阴影都可以轻松实现这样的效果。

这个伪类是应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。

相关文章