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

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

来源：https://www.cnblogs.com/f6056/p/11583929.html

标签

box-shadow

css3阴影