css如何设置边框阴影？

在css中，我们可以通过box-shadow属性来设置边框阴影。下面本篇文章就来给大家介绍一下CSS box-shadow属性，希望对大家有所帮助。

box-shadow属性可以向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

取值：

h-shadow：必需设置的值，定义水平阴影的位置。允许负值。
v-shadow：必需设置的值，定义垂直阴影的位置。允许负值。
blur：可选设置的值，定义模糊距离。
spread：可选设置的值，定义阴影的尺寸。
color ：可选设置的值，定义阴影的颜色。如果没有设置值，颜色值基于浏览器显示，建议设置。
inset：可选设置的值，设置后可将外部阴影 (outset) 改为内部阴影。

考虑兼容性

//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

代码实例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>box-shadow的用法</title>
		<style type="text/css">
			.demo {
				width: 800px;
				overflow: hidden;
				margin: 50px auto;
			}
			
			.demo * {
				width: 150px;
				height: 150px;
				margin: 40px 20px;
				background-color: grey;
				display: inline-block;
			}
			/*右下阴影*/
			
			.box-shadow-1 {
				-webkit-box-shadow: 3px 3px 3px;
				-moz-box-shadow: 3px 3px 3px;
				box-shadow: 3px 3px 3px;
			}
			/*四边同色阴影*/
			
			.box-shadow-2 {
				-webkit-box-shadow: 0 0 10px #0CC;
				-moz-box-shadow: 0 0 10px #0CC;
				box-shadow: 0 0 10px #0CC;
			}
			/*四边同色阴影扩展*/
			
			.box-shadow-3 {
				-webkit-box-shadow: 0 0 10px 15px #0CC;
				-moz-box-shadow: 0 0 10px 15px #0CC;
				box-shadow: 0 0 10px 15px #0CC;
			}
			/*四边同色内阴影*/
			
			.box-shadow-4 {
				-webkit-box-shadow: inset 0 0 10px #0CC;
				-moz-box-shadow: inset 0 0 10px #0CC;
				box-shadow: inset 0 0 10px #0CC;
			}
			/*四边异色外阴影*/
			
			.box-shadow-5 {
				box-shadow: -10px 0 10px red, /*左边阴影*/
				10px 0 10px yellow, /*右边阴影*/
				-10px 10px blue, /*顶部阴影*/
				10px 10px green;
				/*底边阴影*/
			}
			/*叠加异色阴影*/
			
			.box-shadow-6 {
				box-shadow: 0 0 10px 5px black, 0 10px 20px red;
			}
			/*兼容ie*/
			
			.box-shadow {
				filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', 
				Direction=135, Strength=5);
				/*for ie6,7,8*/
				background-color: #ccc;
				-moz-box-shadow: 2px 2px 5px #969696;
				/*firefox*/
				-webkit-box-shadow: 2px 2px 5px #969696;
				/*webkit*/
				box-shadow: 2px 2px 5px #969696;
				/*opera或ie9*/
			}
		</style>
	</head>

	<body>
		<div class="demo">
			<div class="box-shadow-1">右下阴影</div>
			<div class="box-shadow-2">四边同色阴影</div>
			<div class="box-shadow-3">四边同色阴影扩展</div>
			<div class="box-shadow-4">四边同色内阴影</div>
			<div class="box-shadow-5">四边异色外阴影</div>
			<div class="box-shadow-6">叠加异色阴影</div>
			<div class="box-shadow">兼容ie</div>
		</div>
	</body>

</html>

效果图：