|   字数统计: 790(字)

CSS3实现图片阴影效果

发表于 | 分类于 | 阅读次数

CSS3实现图片阴影效果

上图为曲线阴影
下图为翘边阴影

实现原理 ：在图片下叠加一层，使其边框显示在图片边缘 。上图叠加了一层，下图叠加了两层 具体看慕课网的教程。

技术点

  • :before
  • :after
  • box-shadow
  • transform:skew()
1
border-radius: 100px/10px;

1
border-radius: 100px 10px;

代码

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
body{
	font-family: Arial;
	font-size: 20px;
}
body,ul,li{
	margin:0;
	padding:0;
	list-style:none;
}
.wrap{
	width: 70%;
	height:200px;
	margin:50px auto; 
	background: #fff;
}
.wrap h1{
	font-size: 20px;
	text-align: center;
	line-height: 200px;
}
.effect{
	position: relative;
	box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	-moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
	-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;;
	-o-box-shadow:0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; ;
	-ms-box-shadow: 0px 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;;
}
.effect:after,.effect:before{
	content: '';
	background: #f00;
	position: absolute;
	z-index:-1;
	top: 50%;
	bottom: 0;
	left: 20px;
	right: 20px;
	-webkit-box-shadow:0 0 30px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 30px rgba(0,0,0,0.8);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.8);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.8);
	box-shadow:0 0 20px rgba(0,0,0,0.8);
	border-radius: 100px/10px;
}
.box{width: 980px;
	height: auto;
	clear: both;
	overflow: hidden;
	margin:20px auto;
}
.box li{
	position: relative;
	width: 300px;
	height: 210px;
	float: left;
	background: #fff;
	margin:20px 10px;
	border:2px solid #efefef;
	box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
	-ms-box-shadow: 0 1px 4px rgba(0,0,0,0.27),0 0 60px rgba(0,0,0,0.1) inset;
}
.box li img{
	display: block;
	width: 290px;
	height: 200px;
	margin:5px;
}
.box li:before{
	content:'';
	position: absolute;
	z-index: -2;
	width: 90%;
	height: 80%;
	left: 20px;
	bottom:8px;
	background: transparent;
	box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-ms-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-webkit-transform:skew(-12deg) rotate(-4deg);
	-moz-transform:skew(-12deg) rotate(-4deg);
	-o-transform:skew(-12deg) rotate(-4deg);
	-ms-transform:skew(-12deg) rotate(-4deg);
	transform:skew(-12deg) rotate(-4deg);
}
.box li:after{
	content:'';
	position: absolute;
	z-index: -2;
	width: 90%;
	height: 80%;
	right: 20px;
	bottom:6px;
	background: transparent;
	box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-ms-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
	-webkit-transform:skew(12deg) rotate(4deg);
	-moz-transform:skew(12deg) rotate(4deg);
	-o-transform:skew(12deg) rotate(4deg);
	-ms-transform:skew(12deg) rotate(4deg);
	transform:skew(12deg) rotate(4deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3实现图片阴影效果(曲线阴影和翘边阴影) | 镜心书社</title>
	<link rel="stylesheet" type="text/css" href="style/pic_shadow.css">
</head>
<body>
	<div class="wrap effect">
		<h1>Shadow Effect</h1>
	</div>
	<ul class="box">
		<li><img src="images/1 (1).jpg" alt=""></li>
		<li><img src="images/1 (2).jpg" alt=""></li>
		<li><img src="images/1 (3).jpg" alt=""></li>
	</ul>
</body>
</html>

慕课网 CSS3实现“图片阴影”效果

AlexZ33 wechat
扫码订阅公众号
如果文章对您有用请随意打赏，谢谢支持！