在我们浏览网页的时候会发现有的网页在你鼠标划过的时候边缘会出现一层阴影效果，就比如
然后在样式中添加box-shadow，因为是鼠标滑到图片上面才显示阴影，所以我们要设置滑动，在滑动里面添加box-shadow，这里我是设了双层的阴影，就是给了双份的box-shadow，中间用逗号隔开，第一层控制图片外围的一圈白边，第二层控制阴影
当鼠标没有滑过图片时
当鼠标滑过图片时
box-shadow：后面有5个数值
第1个长度值⽤来设置对象的阴影⽔平偏移值。⽔平偏移量正值向， 右负值向左；
第2个长度值⽤来设置对象的阴影垂直偏移值。垂直偏移量正值向 ，下负值向上；
第3个长度值则⽤来设置对象的阴影模糊值。模糊度不能为负值；
第4个长度值则⽤来设置对象的阴影外延值。不允许负值
第5个是设置对象的阴影的颜⾊
是不是很神奇
我学识有限，若有错误，还望及时指出，以免误导他人，谢谢！！！
<head><title>CSS边框阴影</title>
<style>
.dropshadow2{
float:left
clear:left
background: url(/jscss/demoimg/200903/shadowAlpha.png) no-repeat bottom right !important
background: url(/jscss/demoimg/200903/shadow.gif) no-repeat bottom right
margin: 10px 0 10px 10px !important
margin: 10px 0 10px 5px
width: 360px
padding: 0px
}
.innerbox{
position:relative
bottom:6px
right: 6px
border: 1px solid #999999
padding:4px
margin: 0px 0px 0px 0px
}
.innerbox{
/* IE5 hack */
margin: 0px 0px -3px 0px
margin: 0px 0px 0px 0px
}
.innerbox p{
font-size:14px
margin: 3px
}
</style>
</head>
<body>
<div class="dropshadow2"><div class="innerbox"><h4>CSS阴影：</h4> <p>这段边框阴影效果怎么样呢？</p></div></div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）