转载---CSS3实现曲线阴影和翘边阴影
2016-04-27 09:50
465 查看
预备知识
DIV+CSS基础圆角:
border-radius
2D变换:
transform:skew && rotate
伪类:
:before和
:after
代码
HTML结构代码很简单,CSS内含注释,图片小伙伴们自己替换哈!HTML
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS3实现曲线阴影和翘边阴影</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div class="wrap effect"> <h1>啦啦啦德玛西亚!!!!</h1> </div> <p>这是曲线阴影效果!!!!</p> <ul class="box"> <li><img src="img/iconfont-blog.jpg" alt="测试图片"></li> <li><img src="img/iconfont-github.jpg" alt="测试图片"></li> <li><img src="img/iconfont-weibo.jpg" alt="测试图片"></li> </ul> <p>这是翘边阴影效果!!!!</p> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
CSS
*
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
/*简易版reset*/
ul
{
list-style: none;
}
/*取消列表样式*/
p
{
font-size: 30px;
font-weight: bold;
margin: -30px 0 50px 0;
text-align: center;
}
.wrap
{
width: 50%;
height: 300px;
margin: 80px auto;
background: #fff;
}
/*包块的宽高,背景色及居中对齐*/
.wrap h1
{
font-size: 30px;
line-height: 300px;
text-align: center;
}
/*设置字体大小,对齐方式及行高(垂直居中)*/
.effect
{
position: relative;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
}
/**
* 设置盒子外阴影和内阴影
-----------------------------------------------------------------------
可以使用十六进制颜色,若是需要用到透明度,建议用rgba
box-shadow:h-shadow v-shadow blur spread color inset
必需：h-shadow(水平)，v-shadow（垂直）
可选：blur（模糊距离），spread（阴影尺寸），color（阴影颜色），inset（内阴影）
浏览器兼容：IE9+、FireFox4、Chrome、Opera、Safari5.1.1
*/
.effect:after,
.effect:before
{
position: absolute;
z-index: -1;
top: 50%;
right: 30px;
bottom: 0;
left: 30px;
content: '';
border-radius: 100px/10px;
box-shadow: 0 0 20px rgba(0, 0, 0, .8);
-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, .8);
}
/**
* .追加盒子,产生曲线阴影的效果,应用after+before重叠阴影更加厚实,使用z-index调整位置
-----------------------------------------
:after 和 :before ，content添加内容，
浏览器兼容：对于IE8及更早版本中的：after，必须声明<!DOCTYPE>
border-radius:x/y(水平半径/垂直半径)
*/
.box
{
clear: both;
overflow: hidden;
width: 980px;
height: auto;
margin: 20px auto;
}
/**
* 主容器宽度固定,高度自适应..清除所有浮动且容器居中
*/
.box li
{
position: relative;
float: left;
width: 300px;
height: 300px;
margin: 20px 10px;
border: 2px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .7), 0 0 60px rgba(0, 0, 0, .7) inset;
solid: #000;
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, .7), 0 0 60px rgba(0, 0, 0, .7) inset;
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, .7), 0 0 60px rgba(0, 0, 0, .7) inset;
}
/**
* width:(300+10*2+2*2)*3 = 972 <980
* 增加阴影
*/
.box li img
{
display: block;
width: 290px;
height: 290px;
margin: 5px;
}
/**
* width:(290 + 5*2) = 300 == li.width
* height:(290+ 5*2) = 300 == li.height
*/
.box li:before
{
position: absolute;
z-index: -1;
bottom: 13px;
left: 20px;
width: 90%;
height: 80%;
content: '';
-webkit-transform: skew(-8deg) rotate(-4deg);
-ms-transform: skew(-8deg) rotate(-4deg);
transform: skew(-8deg) rotate(-4deg);
box-shadow: 0 10px 20px rgba(0, 0, 0, .6);
-ms-box-shadow: 0 10px 20px rgba(0, 0, 0, .6);
-o-box-shadow: 0 10px 20px rgba(0, 0, 0, .6);
}
.box li:after
{
position: absolute;
z-index: -2;
right: 20px;
bottom: 13px;
width: 90%;
height: 80%;
content: '';
-webkit-transform: skew(8deg) rotate(4deg);
-ms-transform: skew(8deg) rotate(4deg);
transform: skew(8deg) rotate(4deg);
box-shadow: 0 10px 20px rgba(0, 0, 0, .6);
-ms-box-shadow: 0 10px 20px rgba(0, 0, 0, .6);
-o-box-shadow:0 10px 20px rgba(0, 0, 0, .6);
}
/**
* 满满的计算....变形平行四边形.高度不能满
*
* ----------------------------------------------------
*
* transform 旋转; skew(xdeg,ydeg)
* tansform:skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换
* 一个参数单一方向2D转换,如X 水平,Y垂直
*rotate(degree) --- 图形旋转
*/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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
效果图
希望这笔记对小伙伴们有些许用处~~~
原文作者：crper
原文链接：http://blog.csdn.net/crper/article/details/45999133
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- div、css圆形头像
- css inline忽略宽和高
- 网页加载速度优化2--先加载css，然后再加载js文件。
- Css表格
- CSS3基础第一篇（圆角，阴影，渐变，选择器）
- CSS魔法堂：重拾Border之——解构Border
- CSS选择器
- mac下webstorm添加scss watcher
- CSS 使用Sprites技术实现圆角效果
- css清除浮动
- 6.5 Ext.util.CSS 更好地操作css
- 高性能 CSS3 动画
- 作为后台人员你需要知道的CSS基本知识
- 修改文件上传按钮样式
- （转载）CSS3自定义滚动条样式 -webkit-scrollbar
- css的伪元素::after和::before的使用
- 多行文本溢出用省略号表示
- div+css页面右侧底部悬浮层
- 一些CSS实现的特效
- CSS3 div水平、垂直居中，IE9以上、Firefox、Chrome均正常