1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
>
4
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
5
<
title
>欧朋浏览器
</
title
>
6
<
style
>
.oplogo {
7
width:
512px;
8
height:
512px;
9
margin:
0 auto;
10
position:
relative;
11
overflow:
hidden;
12
top:
50px;
13
}
14
15
.oplogo div {
16
position:
absolute;
17
}
18
19
/*
***** 外 圆*****
*/
20
.outround {
21
width:
440px;
22
height:
470px;
23
background-color:
#800;
24
background:
-moz-linear-gradient(-90deg, #F88, #800);
25
background:
-webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800));
26
top:
20px;
27
left:
36px;
28
-moz-border-radius:
220px/235px;
29
-webkit-border-radius:
220px 235px;
30
border-radius:
220px/235px;
31
}
32
33
/*
***** 边框高光 *****
*/
34
.highlight {
35
width:
436px;
36
height:
466px;
37
background-color:
#d40009;
38
background:
-moz-linear-gradient(-90deg, #FCC, #E71616 50%, #d40009);
39
background:
-webkit-gradient(linear, 0 top, 0 bottom, from(#FCC), color-stop(50%, #E71616), to(#d40009));
40
top:
22px;
41
left:
38px;
42
border-radius:
218px/233px;
43
-moz-border-radius:
218px/233px;
44
-webkit-border-radius:
218px 233px;
45
}
46
47
/*
***** 上部高亮 *****
*/
48
.fill {
49
width:
436px;
50
height:
456px;
51
background-color:
#E71616;
52
background:
-moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304);
53
background:
-webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A), to(#b80304), color-stop(50%, #E71616), color-stop(80%, #800000), color-stop(85%, #800000));
54
top:
30px;
55
left:
38px;
56
border-radius:
218px/228px;
57
-moz-border-radius:
218px/228px;
58
-webkit-border-radius:
218px 228px;
59
}
60
61
/*
***** 内 圆 *****
*/
62
.inround {
63
width:
198px;
64
height:
396px;
65
background-color:
#d20000;
66
background:
-moz-linear-gradient(-90deg, #cc3836, #d9100f 50%, #d20000);
67
background:
-webkit-gradient(linear, 0 top, 0 bottom, from(#cc3836), color-stop(50%, #d9100f), to(#d20000));
68
left:
158px;
69
top:
56px;
70
border-radius:
99px/170px;
71
-moz-border-radius:
99px/170px;
72
-webkit-border-radius:
99px 170px;
73
}
74
75
/*
***** 内填充 *****
*/
76
.inside {
77
width:
192px;
78
height:
390px;
79
background-color:
#b80000;
80
background:
-moz-linear-gradient(-90deg, #9a0000, #b80000);
81
background:
-webkit-gradient(linear, 0 top, 0 bottom, from(#9a0000), to(#b80000));
82
left:
161px;
83
top:
59px;
84
border-radius:
96px/170px;
85
-moz-border-radius:
96px/170px;
86
-webkit-border-radius:
96px 170px;
87
}
88
89
/*
***** 内镂空 *****
*/
90
.counter {
91
width:
164px;
92
height:
368px;
93
background-color:
#FFF;
94
left:
174px;
95
top:
71px;
96
border-radius:
2px/170px;
97
-moz-border-radius:
82px/170px;
98
-webkit-border-radius:
82px 170px;
99
}
100
101
/*
***** 亮阴影 *****
*/
102
.lightshdow {
103
left:
106px;
104
top:
344px;
105
height:
50px;
106
width:
304px;
107
border-radius:
152px/25px;
108
moz-border-radius:
152px/25px;
109
-webkit-border-radius:
152px 25px;
110
box-shadow:
0 100px 30px hsla(0, 0%, 0%, .2);
111
-moz-box-shadow:
0 100px 30px hsla(0, 0%, 0%, .2);
112
-webkit-box-shadow:
0 100px 30px hsla(0, 0%, 0%, .2);
113
}
114
115
/*
***** 暗阴影 *****
*/
116
.darkshdow {
117
left:
146px;
118
top:
325px;
119
height:
70px;
120
width:
220px;
121
border-radius:
110px/35px;
122
moz-border-radius:
110px/35px;
;
123
-webkit-border-radius:
110px 35px;
;
124
box-shadow:
0 100px 15px hsla(0, 0%, 0%, .6);
125
-moz-box-shadow:
0 100px 15px hsla(0, 0%, 0%, .6);
126
-webkit-box-shadow:
0 100px 15px hsla(0, 0%, 0%, .6);
127
}
</
style
>
128
</
head
>
129
<
body
>
130
<
div
class
="oplogo"
>
131
<
div
class
="lightshdow"
></
div
>
132
<
div
class
="darkshdow"
></
div
>
133
<
div
class
="outround"
></
div
>
134
<
div
class
="highlight"
></
div
>
135
<
div
class
="fill"
></
div
>
136
<
div
class
="inround"
></
div
>
137
<
div
class
="inside"
></
div
>
138
<
div
class
="counter"
></
div
>
139
</
div
>
140
</
body
>
141
</
html
>
/Files/qzsonline/css3_opera.rar
转载于:https://www.cnblogs.com/qzsonline/archive/2012/01/12/2320256.html
