首页 > 代码库 > box-shadow实例1
box-shadow实例1
实例一：
1.html
<div class="paddingMiddle"> <div class="blank"></div> <div class="divOne outerOne"></div> <div class="divOne outerTwo"></div> <div class="divOne outerThree"></div> <div class="clear"></div> <div class="blank"></div> <div class="divOne innerOne"></div> <div class="divOne moreOne"></div> </div>
2.css
.divOne { margin-left: 30px; float: left; } /*外阴影常规效果*/ .outerOne { box-shadow: -10px 10px rgba(0,0,0,0.6); } /*外阴影模糊效果*/ .outerTwo { box-shadow: 10px 10px 10px rgba(0,0,0,0.6); } /*外阴影模糊外延效果*/ .outerThree { box-shadow: 5px 5px 10px 10px rgba(0,0,0,0.6); } /*内阴影效果*/ .innerOne { box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.6) inset; } /*多重阴影效果 覆盖*/ .moreOne { box-shadow: 0 0 5px 5px rgba(255,0,0,0.6), 0 0 5px 10px rgba(0,183,0,0.6); }
3.显示结果
IE:
FF:
实例二：
1.html
<div class="blank"></div> <div class="paddingBig"> <img src="../Images/3.jpg" class="imgOne" /> <img src="../Images/3.jpg" class="imgTwo" /> <img src="../Images/3.jpg" class="imgThree" /> <img src="../Images/3.jpg" class="imgFourth" /> </div>
2.CSS
.paddingBig img { width: 150px; height: 150px; float: left; margin-right:30px; } /*投影，没有位移，10px的阴影大小，没有扩展，颜色red*/ /* * 此处颜色 可以使用 HEX值，也可以使用RGBA值 */ .imgOne { box-shadow:0 0 10px rgba(255,0,0,0.8); } /*在上面的基础加上10px 的扩展*/ .imgTwo { box-shadow: 0 0 10px 10px rgba(255,0,0,0.8); } /*内阴影，无位移，10px大小，没有扩展，颜色red*/ .imgThree { box-shadow: inset 0 0 10px rgba(255,0,0,0.8); padding: 10px; } /*多重阴影效果,左边红色，上边黄色，右边蓝色，下边绿色*/ /* *注意:使用多个阴影存在覆盖问题 */ .imgFourth { box-shadow: -10px 0px 10px red, 10px 0px 10px blue, 0px -10px 10px yellow, 0px 10px 10px green; }
3.显示结果
IE: EF:
box-shadow实例1
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。