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

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
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);
}

效果

我是图片

文章作者: Coio
文章链接: http://yoursite.com/2018/03/23/css3特效,阴影、渐变、蒙版、倒影/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶