本文介绍了CSS3中的盒子阴影box-shadow,包括单边实影和单边阴影、两种四边阴影、内阴影、多层阴影等!以及结合边框圆角、变形、旋转、调整层级关系等属性实现了曲边阴影和翘边阴影效果!
box-shadow属性的基本使用
box-shadow:[inset] h-shadow v-shadow blur spread color;
共有6个参数,其中inset可以省略,省略情况下默认为外阴影。此外分别是阴影水平偏移量、阴影垂直偏移量、阴影模糊半径、阴影扩展半径、阴影颜色。
1.单边实影和单边阴影效果:
/*单边实影:模糊半径为0*/
.top{
box-shadow:0px -5px 0 #ccc;
}
/*单边阴影:阴影拓展半径必须配合使用!若没有扩展半径,则不是其他边也会有阴影效果*/
.bottom{
box-shadow:0 5px 5px -3px #ccc;
}
2.四边相同阴影效果:分两种!
第一种:只设置阴影模糊半径和阴影颜色
/*模糊半径+颜色*/
.box-shadow2{
width:200px;height:200px;
border:1px solid #ccc;
box-shadow: 0 0 10px #ccc;
margin: 10px;
}
/*在此基础上加上扩展半径可以加深阴影的深度(正值),也可向内压缩阴影(负值),直到扩展半径等于模糊半径,阴影才完全消失。 */
.box-shadow3{
width:200px;height:200px;
border:1px solid #ccc;
box-shadow: 0 0 10px -1px #ccc;/*此刻阴影为完全消失,向内压缩了*/
margin: 10px;
}
第二种:只设置扩展半径和阴影颜色
/*设置阴影模糊半径和阴影颜色:模拟border边框,但不计入总大小*/
.box-shadow4{
width:200px;height:200px;
border:1px solid #ccc;
box-shadow: 0 0 0 10px #ccc;
margin:20px;
}
注意:设置阴影模糊半径和阴影颜色:模拟border边框,但不计入总大小,但要注意层级关系:边框在内阴影之上,内阴影在背景图片之上,背景图片在背景色之上,背景色在外阴影之上。
3.内阴影效果:
/*内阴影效果*/
.inset-shadow{
width:200px;height:200px;
border:1px solid #ccc;
box-shadow:inset 3px 3px 10px #ccc;
margin: 10px;
}
注意:可能在图片上会需要设置内阴影效果,但实际上img内阴影是无效果的!思路:在img外添加一个div容器,设置它的box-shadow内阴影。
4.多层阴影效果:
/*多层阴影:先定义在最顶层*/
.box-shadow5{
width:200px;height:200px;
border:1px solid #ccc;
box-shadow:
5px 5px