Rumah >hujung hadapan web >tutorial css >css怎么实现鼠标移动到div块时自动加阴影效果?
我们在浏览各大网站时,点击其中的图片可能会出现放大或者旋转等等的特效。这种效果的确能让人眼前一亮,也就可能带来用户点击的流量。当然强大的css功能不仅仅只有这样特效。本篇文章就给大家介绍一种更加酷炫的特效即当鼠标移入div块时产生的css阴影效果,这样就能立即产生立体感。
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 没有定义究竟是哪些元素。
【相关内容推荐】
Atas ialah kandungan terperinci css怎么实现鼠标移动到div块时自动加阴影效果?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!