1. 程式人生 > >3、盒模型新增樣式

3、盒模型新增樣式

在CSS3中盒模型新增了box-shadow樣式,該樣式可以為盒模型設定陰影,詳解見 box-shadow

示例,下面為盒模型設定陰影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#sh{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background: red;
				width: 300px;
				height: 300px;
				text-align: center;
				line-height: 300px;
				font-size: 50px;
				box-shadow: 10px 10px 10px 10px yellow;
			}
		</style>
	</head>
	<body>
		<div id="sh">
			上海
		</div>
	</body>
</html>

box-shadow: 10px 10px 10px 10px yellow表示原來的盒模型向下、向左、擴充套件、模糊半徑各位10px 效果如下: 在這裡插入圖片描述