css3特效，阴影、渐变、蒙版、倒影

我是图片

CSS3属性前缀

CSS3的属性为什么要带前缀

因为浏览器厂商很早一直在实施CSS3,在测试阶段,还没真正的标准所以需要加上前缀。

浏览器内核和前缀

内核 浏览器 前缀
Trident IE -ms-
Gecko Firefox -moz-
WebKit Safari、Chrome -webkit-
Presto Opera -o-
Blink Chrome(28及往后版)、Opera(15及往后版本)、Yandex -webkit-

css3阴影

text-shadow 文本阴影

以下这些效果都是通过css3:text-shadow属性设置的。

我是图片

语法

text-shadow: x y blur color;

属性值 描述
x 阴影的左右偏移
y 阴影的上下偏移
blur 阴影的模糊度
color 阴影的颜色

结构

1
2
3
4
5
6
7
8
<div class='d1'>CSS3 文本阴影</div>
<div class='d2'>CSS3 文本阴影</div>
<div class='d3'>CSS3 文本阴影</div>
<div class='d4'>CSS3 文本阴影</div>
<div class='d5'>CSS3 文本阴影</div>
<div class='d6'>CSS3 文本阴影</div>
<div class='d7'>CSS3 文本阴影</div>
<div class='d8'>CSS3 文本阴影</div>

样式

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
div{
	margin:0 auto;
	padding:40px 0;
	text-align:center;
	height:50px;
	width:380px;
	font-size:44px;
	font-weight:bold;
	background:#d5d2c1;
}
.d1{
	background:#454545;
	color: #333;
	text-shadow: -1px -1px #ccc, 1px 1px #666;
}
.d2{
	background:#000;color:#fff;
	text-shadow:0px 0px 5px #f0f,
	0px 0px 10px rgba(255,0,255,0.8),
	0px 0px 20px rgba(255,0,255,0.8),0px 0px 35px rgba(255,0,255,0.8),
	0px 0px 55px rgba(255,0,255,0.8);
}
.d3{
    background:#ddd;color: #fff;
	text-shadow:0 1px 0 #ccc,
	0 2px 0 #c9c9c9,
	0 3px 0 #bbb,
	0 4px 0 #b9b9b9,
	0 5px 0 #aaa,
	0 6px 1px rgba(0,0,0,0.1),
	0 0 5px rgba(0,0,0,0.1),
	0 1px 3px rgba(0,0,0,0.3),
	0 3px 5px rgba(0,0,0,0.2),
	0 5px 10px rgba(0,0,0,0.25);
}
.d4{
	background:#eee;
	color: transparent;
	text-shadow: 0 0 8px #f36;
}
.d5{
	color: #ccc;
	text-shadow: -1px -1px #333, 1px 1px #fff;
}
.d6{
	background:#eee;
	color:#707070;
	text-shadow: 0px -1px #00f,
	0px 1px #00f,
	1px 0px #00f,
	-1px 0px #00f;
}
.d7{
	-webkit-text-stroke: 1px #000;
	-webkit-text-fill-color: transparent;
}
.d8{
	background:#eee;color:rgba(255,0,0,0.8);
	text-shadow: 0 -3px 6px rgba(255,0,0,0.8),
	0 -6px 10px rgba(255,64,0,0.8),
	0 -10px 16px  rgba(255,127,0,0.8),
	0 -16px 24px  rgba(255,127,0,0.4),
	0 -22px 30px  rgba(255,127,0,0.1);
}

box-shadow 盒阴影

语法

text-shadow: x y blur color

属性值 描述
x 阴影的左右偏移
y 阴影的上下偏移
blur 阴影的模糊度
spread 阴影的尺寸
color 阴影的颜色
inset 设置为内部阴影

结构

1
2
3
4
<div class='d1'>CSS3 盒阴影</div>
<div class='d2'>CSS3 盒阴影</div>
<div class='d3'>CSS3 盒阴影</div>
<div class='d4'>CSS3 盒阴影</div>

效果

我是图片

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
div{
	margin:0 auto;
	padding:40px 0 50px;
	text-align:center;
	height:50px;
	width:300px;
	margin: 20px;
	font-size:45px;
	font-weight:bold;
	background:#d5d2c1;
	background:#ddd;color: #fff;
	text-shadow:0 1px 0 #ccc,
	0 2px 0 #c9c9c9,
	0 3px 0 #bbb,
	0 4px 0 #b9b9b9,
	0 5px 0 #aaa,
	0 6px 1px rgba(0,0,0,0.1),
	0 0 5px rgba(0,0,0,0.1),
	0 1px 3px rgba(0,0,0,0.3),
	0 3px 5px rgba(0,0,0,0.2),
	0 5px 10px rgba(0,0,0,0.25);
}
.d1{
	box-shadow: 2px 2px 5px 0px black;
}
.d2{
	box-shadow: -2px -2px 5px 0px black;
}
.d3{
	box-shadow: 0px 0px 5px 5px black;
}
.d4{
	box-shadow: 0px 0px 5px 5px black inset;
}

CSS3渐变

线性渐变: linear-gradient

结构

1
2
3
4
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div{
	width: 200px;
	height: 200px;
}
.d1{
	background: linear-gradient(red,blue);
}
.d2{
	background: linear-gradient(90deg,red,blue);
}
.d3{
	background: linear-gradient(to left,red,blue);
}
.d4{
	background: linear-gradient(red 0%,yellow 80%,blue 100%);
}

效果

我是图片

径向渐变: radial-gradient

结构

1
2
3
4
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div{
	width: 200px;
	height: 200px;	
}
.d1{
	background: -webkit-radial-gradient(red,blue);
}
.d2{
	background: -webkit-radial-gradient(red,yellow 80%,blue);
}
.d3{
	background: -webkit-radial-gradient(0px 0px,red,yellow,blue);
}
.d4{
	background: -webkit-radial-gradient(50% 50%,50px 50px,red,blue,yellow);
}

效果

我是图片

css3蒙版

蒙版素材

我是图片

结构

1
2
3
4
5
6
7
8
9
10
11
12
<div>
	<p class="d1"></p>
</div>
<div>
	<p class="d2"></p>
</div>
<div>
	<p class="d3"></p>
</div>
<div>
	<p class="d4"></p>
</div>

样式

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
div{
	width: 200px;
	height: 200px;
	border:5px solid black;
	float: left;
	margin: 20px;
}
p{
	margin: 0;
	height: 100%;
	background: blue;
}
.d1{
	-webkit-mask-image: url(8_star.png);
}
.d2{
	-webkit-mask-image: url(8_star.png);
	-webkit-mask-repeat:no-repeat;
}
.d3{
	-webkit-mask-image: url(8_star.png);
	-webkit-mask-repeat:no-repeat;
	-webkit-mask-position:50px 50px;
}
.d4{
	-webkit-mask:-webkit-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,1));
}

效果

我是图片

css3倒影

结构

1
2
3
4
<div class="d1">css3倒影</div>
<div class="d2">css3倒影</div>
<div class="d3">css3倒影</div>
<div class="d4">css3倒影</div>

样式

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
body{
	padding: 100px;
}
div{
	width: 150px;
	height: 100px;
	border: 5px solid black;
	text-align: center;
	font-size: 25px;
	line-height: 100px;
	float: left;
	margin: 20px;		
}
.d1{
	-webkit-box-reflect:above 0px;				
}
.d2{
	-webkit-box-reflect:right 0px;
}
.d3{
	-webkit-box-reflect:below  10px linear-gradient(transparent,black);
}
.d4{
	-webkit-box-reflect:right 10px linear-gradient(transparent,black);
}

效果

我是图片