在我们浏览网页的时候会发现有的网页在你鼠标划过的时候边缘会出现一层阴影效果，就比如
然后在样式中添加box-shadow，因为是鼠标滑到图片上面才显示阴影，所以我们要设置滑动，在滑动里面添加box-shadow，这里我是设了双层的阴影，就是给了双份的box-shadow，中间用逗号隔开，第一层控制图片外围的一圈白边，第二层控制阴影
当鼠标没有滑过图片时
当鼠标滑过图片时
box-shadow：后面有5个数值
第1个长度值⽤来设置对象的阴影⽔平偏移值。⽔平偏移量正值向， 右负值向左；
第2个长度值⽤来设置对象的阴影垂直偏移值。垂直偏移量正值向 ，下负值向上；
第3个长度值则⽤来设置对象的阴影模糊值。模糊度不能为负值；
第4个长度值则⽤来设置对象的阴影外延值。不允许负值
第5个是设置对象的阴影的颜⾊
是不是很神奇
我学识有限，若有错误，还望及时指出，以免误导他人，谢谢！！！
滤镜<style type="text/css">
.shadow{
width:120px
font-size:12px
padding:10px
/*以下属性作用于firefox */
-moz-box-shadow :3px 3px 4px #ccc /*-maz- box-shadow:水平方向位移 竖直方向位移 模糊半径 颜色 */
/*以下属性为ie 支持*/
*filter : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#cccccc")/*力度，角度，颜色 */
/*以下只能被safari3浏览器支持*/
-webkit-box-shadow :3px 3px 4px #ccc
/*以下属性只被Opera到最新的10.53版本支持*/
box-shadow :3px 3px 4px #ccc
}
</style>
</head>
<body>
<div class="shadow">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）