语法:
box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
用于在块级元素(如div)上投射阴影。
参数说明:
1、阴影的水平偏移量,正数表示阴影在框的右侧,负偏移量将阴影放在框的左侧。
2、阴影的垂直偏移,负数表示阴影在框的上方,正数表示阴影在框的下方。
3、模糊半径(可选),如果将其设置为0,阴影将变得清晰,数字越大,模糊程度越大。
4、传播半径(可选),正值增加阴影的大小,负值减小阴影的大小。 默认值为0(阴影与模糊大小相同)。于长而直的阴影边缘,它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域,过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。
5、阴影颜色(可选),默认颜色存在跨浏览器不兼容,目前chrome、firefox为黑色,safari为透明色。
6、设置为内阴影(可选),没有设置则为外阴影。若设置,该关键词放置在语句开头或末尾均可。
.shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; }
内阴影
.shadow { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; }
IE盒阴影
<div class="shadow1"> <div class="content"> Box-shadowed element </div> </div>
.shadow1 { margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); box-shadow: 5px 5px 5px rgba(68,68,68,0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; } .shadow1 .content { position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; }
一条边阴影
使用负传播半径,您可以将其挤压在框阴影中,并且仅将其从框的一个边缘推出。
.one-edge-shadow { -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; }