css3 opera

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