CSS3实现阴影的效果

发表于 | 分类于

网页阴影部分代码其实很简单
用到的知识点只有两个

第一个就是box-shadow

功能：添加一个或多个阴影；

语法：

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

h-shadow(必须):水平阴影位置
v-shadow(必须):垂直阴影位置
blur：模糊度
spread：阴影的尺寸；
color：阴影的颜色；
inset：将外部阴影（outset）改为每部阴影；

第二个知识点就是:after :before的使用

比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<title>阴影的实现</title>
<meta charset="utf-8">
<style>
		.effect{
		margin-left:50px;
		margin-top:50px;
		position:relative;
		width:700px;
		height:300px;
		box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 10px rgba(0,0,0,0.8);
		}
	.effect h1{
		font-size:20px;
		text-align:center;
		line-height:300px;
	}
	.effect:before, .effect:after{
		content:'';
		z-index:-1;
		top:50%;
		bottom:0%;
		left:10px;
		right:10px;
		box-shadow:0 0 20px rgba(0,0,0,0.8);
		border-radius:100px/10px;
		}
	</style>
</head>
<body>
	<div class="effect">
	<h1>showdown effect</h1>
	</div>
</body>
</html>
Fork me on GitHub