CSS3之box-shadow

语法:

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;
}

  CSS3之box-shadow

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;
}

  CSS3之box-shadow

上一篇:一步步编写操作系统 67 系统调用的实现1-2 68


下一篇:python中68个内置函数的总结