标签：CSS3 box 6px 阴影 5px 68 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;
}

　　

标签：CSS3,box,6px,阴影,5px,68,shadow
来源： https://www.cnblogs.com/f6056/p/11583929.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。