以下是源代码：
1 <!doctype html>
2 <html>
3
4 <!-- author: @simurai -->
5
6 <head>
7 <title>CSS3神奇的按钮-柯乐义</title>
8 <meta charset="utf-8">
9 <style>
10
11
12 /* This is just the basic styling for the whole page. */
13
14 /* Global ------------------------------------------------------ */
15
16 html {
17 font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
18 background-color: hsl(200,5%,15%);
19 background-size: 5px 5px;
20 background-image: -webkit-linear-gradient( 45deg, hsla(0,0%,0%,0) 0px,
21 hsla(0,0%,0%,.10) 50%,
22 hsla(0,0%,0%,0) 100% );
23 }
24
25 body {
26 margin: 0;
27 }
28
29
30
31 /* list ------------------------------------------------------ */
32
33 ul {
34 list-style: none;
35 padding: 50px 0;
36 margin: 0;
37 font-size: 2em;
38 text-align: center;
39 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,100%,0) 0px,
40 hsla(0,0%,100%,.09) 50%,
41 hsla(0,0%,100%,0) 100% );
42
43 }
44
45 ul li {
46 padding: 50px 0;
47 }
48
49
50
51 /* Aside ------------------------------------------------------ */
52
53 aside {
54 position: fixed;
55 top: 20px;
56 left: 20px;
57 }
58
59 aside button {
60 margin: 0;
61 padding: 10px ;
62 border: none;
63 border-radius: 5px;
64 font-weight: bold;
65 color: hsl(200,100%,60%);
66 background: hsla(0,0%,0%,.12);
67 cursor: pointer;
68 }
69
70 aside button:hover {
71 background: hsla(0,0%,0%,.2);
72 }
73
74 aside button:active {
75 -webkit-transform: translateY(1px);
76 }
77
78 /*
79 * umbrUI meter input by @simurai
80 */
81
82
83
84 /* -------------- meter -------------- */
85
86 meter:nth-child(1) { -webkit-transform: translate(-50px, 50px) rotate(-90deg); }
87 meter:nth-child(2) { -webkit-transform: translate( -25px, 25px) rotate(-90deg); }
88 meter:nth-child(3) { -webkit-transform: translate( 0px, 0px) rotate(-90deg); }
89 meter:nth-child(4) { -webkit-transform: translate( 25px, -25px) rotate(-90deg); }
90 meter:nth-child(5) { -webkit-transform: translate( 50px, -50px) rotate(-90deg); }
91
92
93 meter {
94 -webkit-appearance: none;
95 position: relative;
96 display: block;
97 margin: 8px auto;
98 width: 100px;
99 height: 17px;
100 border-radius: 5px;
101 padding: 4px 5px 4px 5px;
102 box-sizing: border-box;
103 background: #000;
104 -webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,.08);
105 -webkit-transform-origin: center 8px;
106 }
107
108
109 meter::-webkit-meter-bar {
110 background-color: hsl(200,10%,14%);
111 background-size: 2px 5px;
112 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),
113 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );
114 }
115
116
117 meter::-webkit-meter-optimum-value,
118 meter::-webkit-meter-suboptimum-value,
119 meter::-webkit-meter-even-less-good-value {
120 background-size: inherit;
121 background-image: inherit;
122 -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4);
123 -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);
124 }
125
126
127 /* With these pseudo selectors you could change the colors when changing the value. */
128 meter::-webkit-meter-optimum-value { background-color: hsl(200,100%,50%); }
129 meter::-webkit-meter-suboptimum-value { background-color: hsl(200,100%,50%); }
130 meter::-webkit-meter-even-less-good-value { background-color: hsl(200,100%,50%); }
131
132
133 meter:hover::-webkit-meter-optimum-value,
134 meter:hover::-webkit-meter-suboptimum-value,
135 meter:hover::-webkit-meter-even-less-good-value {
136 /*In the real world, just change the element's value, this is just a hack for this demo.*/
137 width: 100% !important;
138 -webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1);
139 }
140
141
142 /*
143 * umbrUI range slider by @simurai
144 */
145
146
147 /* -------------- Range Slider -------------- */
148
149 input[type="range"] {
150 -webkit-appearance: none; /* Remove Safari default */
151 outline: none;
152 width: 250px;
153 height: 5px;
154 border-radius: 1px;
155 position: relative;
156
157
158 background-color: #000;
159
160 -webkit-background-clip: padding-box;
161 border: 0;
162 border-bottom: 1px solid rgba(255,255,255,0.1);
163 cursor: ew-resize;
164 }
165
166 input[type="range"]::-webkit-slider-thumb {
167 -webkit-appearance: none; /* Remove Safari default */
168 position: relative;
169 z-index: 1;
170
171 width: 26px;
172 height: 40px;
173 border-radius: 3px / 6px ;
174
175 background-image: -webkit-gradient( linear, left top, right top,
176 color-stop( 0, hsl(0,0%,15%) ),
177 color-stop( .16, hsl(0,0%,22%) ),
178 color-stop( .18, hsl(0,0%,30%) ),
179 color-stop( .2, hsl(0,0%,26%) ),
180
181 color-stop( .42, hsl(200,60%,30%) ),
182 color-stop( .44, hsl(200,0%,15%) ),
183 color-stop( .46, hsl(200,100%,50%) ),
184 color-stop( .54, hsl(200,100%,50%) ),
185 color-stop( .56, hsl(200,0%,15%) ),
186 color-stop( .58, hsl(200,60%,30%) ),
187
188 color-stop( .8, hsl(0,0%,26%) ),
189 color-stop( .82, hsl(0,0%,30%) ),
190 color-stop( .84, hsl(0,0%,22%) ),
191 color-stop( 1, hsl(0,0%,15%) )
192 );
193
194 -webkit-box-shadow:
195
196 inset hsla(0,0%,100%,.15) 0 1px 0px,
197
198 hsl(0,0%,17%) 0 2px 0px,
199 hsl(0,0%,15%) 0 4px 0px,
200 hsl(0,0%,13%) 0 6px 0px,
201
202 rgba(0,0,0,.5) 0 8px 5px;
203
204 -webkit-transform: translateY(-3px);
205 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
206 from(transparent), color-stop(0.6, transparent), to( rgba(255,255,255,0.15) ));
207 }
208
209 input[type="range"]:hover {
210
211 background-image: -webkit-gradient( linear, left top, right top,
212 color-stop( 0, hsl(200,80%,45%) ),
213 color-stop( .08, hsl(200,80%,15%) ),
214 color-stop( .5, hsl(200,80%,0%) ),
215 color-stop( .92, hsl(200,80%,15%) ),
216 color-stop( 1, hsl(200,80%,45%) )
217 );
218
219 -webkit-box-shadow: inset #000 1px 1px 1px, inset #000 -1px -1px 1px;
220
221 }
222
223
224
225 /*
226 * umbrUI checkboxes by @simurai
227 * Usage: <input type="checkbox" data-icon1="P" data-icon2="v" />
228 */
229
230
231 /* ----------- Checkbox */
232
233
234 input[type="checkbox"] {
235 -webkit-appearance:none; /* Remove Safari default */
236 outline: none;
237 width: 120px;
238 height: 40px;
239
240 position: relative;
241 border-radius: 6px;
242 background-color: #000;
243 -webkit-background-clip: padding-box;
244
245 border: 0;
246 border-bottom: 1px solid transparent;
247 -webkit-perspective: 200;
248 }
249
250 input[type="checkbox"]:before, input[type="checkbox"]:after {
251 font: bold 22px/32px sans-serif;
252
253 text-align: center;
254
255 position: absolute;
256 z-index: 1;
257
258 width: 56px;
259 height: 30px;
260 top: 4px;
261
262 border: 0;
263 border-top: 1px solid rgba(255,255,255,0.15);
264 }
265
266 input[type="checkbox"]:before {
267 content: attr(data-icon1);
268 left: 4px;
269 border-radius: 3px 0 0 3px;
270
271 }
272
273 input[type="checkbox"]:after {
274 content: attr(data-icon2);
275 right: 4px;
276 border-radius: 0 3px 3px 0;
277 }
278
279
280 /* ----------- checked/unchecked */
281
282 /* unchecked */
283 input[type="checkbox"] {
284 -webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%,
285 from(rgba(255,255,255,0)), to(rgba(255,255,255,0)),
286 color-stop(.1,rgba(255,255,255,.05)),
287 color-stop(.3,rgba(5,137,200,0.4)),
288 color-stop(.45,rgba(255,255,255,.05)),
289 color-stop(.9,rgba(255,255,255,.1))
290 )100% 100%;
291
292 background-image: -webkit-gradient(
293 linear, right top, left top,
294 color-stop( 0, hsl(0,0%,0%) ),
295 color-stop( 0.14, hsl(0,0%,50%) ),
296 color-stop( 0.15, hsl(0,0%,0%) )
297 );
298 -webkit-box-shadow: inset #000 -7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
299 }
300 input[type="checkbox"]:after {
301 background-image: -webkit-gradient(linear, 70% top, 40% bottom,
302 from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) )
303 );
304 border-right: 1px solid transparent;
305 -webkit-border-image: -webkit-gradient(linear, left bottom, left top,
306 from(rgba(255,255,255,0)),
307 color-stop(.2,rgba(255,255,255,0)),
308 color-stop(.4,rgba(255,255,255,.5)),
309 to(rgba(255,255,255,.05))
310 )10% 100%;
311
312 -webkit-box-shadow: rgba(0,0,0,.6) 8px 3px 10px;
313 -webkit-transform: rotateY(-30deg) scaleX(.9) scaleY(1.1) translateX(-8px);
314 }
315
316
317 /* checked */
318 input[type="checkbox"]:checked {
319 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%,
320 from(rgba(255,255,255,0)), to(rgba(255,255,255,0)),
321 color-stop(.1,rgba(255,255,255,.05)),
322 color-stop(.3,rgba(5,137,200,0.4)),
323 color-stop(.45,rgba(255,255,255,.05)),
324 color-stop(.9,rgba(255,255,255,.1))
325 )100% 100%;
326
327 background-image: -webkit-gradient(
328 linear, left top, right top,
329 color-stop( 0, hsl(0,0%,0%) ),
330 color-stop( 0.14, hsl(0,0%,50%) ),
331 color-stop( 0.15, hsl(0,0%,0%) )
332 );
333 -webkit-box-shadow: inset #000 7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
334 }
335 input[type="checkbox"]:checked:before {
336 background-image: -webkit-gradient( linear, 30% top, 60% bottom,
337 from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) )
338 );
339 border-left: 1px solid transparent;
340 -webkit-border-image: -webkit-gradient(linear, left bottom, left top,
341 from(rgba(255,255,255,0)),
342 color-stop(.2,rgba(255,255,255,0)),
343 color-stop(.4,rgba(255,255,255,.5)),
344 to(rgba(255,255,255,.05))
345 )10% 100%;
346
347 -webkit-box-shadow: rgba(0,0,0,.6) -8px 3px 10px;
348 -webkit-transform: rotateY(30deg) scaleX(.9) scaleY(1.1) translateX(8px);
349 }
350
351
352 /* ----------- active/inactve */
353
354 /* Active */
355 input[type="checkbox"]:before, input[type="checkbox"]:checked:after {
356 color: hsl(200,100%,50%);
357 text-shadow: rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;
358 -webkit-transform: none;
359 background-image: -webkit-gradient( linear, left top, left bottom,
360 from( hsl(0,0%,20%) ), to( hsl(0,0%,15%) )
361 );
362 -webkit-border-image: none;
363 -webkit-box-shadow: none;
364
365 z-index: 2;
366 }
367
368 /* Inactive */
369 input[type="checkbox"]:after, input[type="checkbox"]:checked:before {
370 color: #000;
371 text-shadow: rgba(255,255,255,.1) 0 -1px 0;
372 -webkit-box-reflect: none;
373 z-index: 1;
374 }
375
376
377
378
379 /* ----------- hover */
380
381 input[type="checkbox"]:hover {
382 cursor: pointer;
383 }
384
385 input[type="checkbox"]:hover:before {
386 background-image: -webkit-gradient( linear, left top, left bottom,
387 from( hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
388 );
389
390 }
391 input[type="checkbox"]:hover:after {
392 background-image: -webkit-gradient(linear, 70% top, 40% bottom,
393 from( hsl(0,0%,16%) ),to( hsl(0,0%,11%) )
394 );
395 }
396
397 input[type="checkbox"]:checked:hover:before {
398 background-image: -webkit-gradient( linear, 30% top, 60% bottom,
399 from( hsl(0,0%,16%) ),to( hsl(0,0%,12%) )
400 );
401
402 }
403 input[type="checkbox"]:checked:hover:after {
404 background-image: -webkit-gradient( linear, left top, left bottom,
405 from( hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
406 );
407 }
408
409 /*
410 * umbrUI number input by @simurai
411 */
412
413 @import url(http://fonts.googleapis.com/css?family=VT323);
414
415
416 /* -------------- number -------------- */
417
418 input[type="number"] {
419 -webkit-appearance: none;
420 outline: none;
421 position: relative;
422 z-index: 1;
423
424 width: 120px;
425 height: 60px;
426 border-radius: 40px / 60px;
427
428 font-family: 'VT323', cursive;
429 font-size: 36px;
430 line-height: 40px;
431 text-align: center;
432 -webkit-font-smoothing: none;
433 color: hsl(200,100%,50%);
434 text-shadow: 0 -1px 0px hsla(200,100%,70%,1), 0 1px 0px hsla(0,0%,0%,.8), 0 0 13px hsl(200,100%,50%);
435
436 border: 0;
437
438 background-color: hsl(200,10%,12%);
439 background-size: 4px 4px;
440 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% ),
441 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 75%, hsla(0,0%,0%,.4) 75% );
442
443 -webkit-box-shadow: inset 0 0 0 4px hsla(0,0%,0%,1),
444 inset 0 0 20px 5px hsla(0,0%,0%,.5),
445 0 0px 0px 1px hsla(0,0%,0%,.4),
446 0 1px 0 hsla(0,0%,100%,.25);
447 }
448
449
450 /* Outer spin only works in Safari, so lets hide it */
451 input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
452
453
454 /* Spin button */
455 input[type="number"]::-webkit-inner-spin-button {
456 -webkit-appearance: none;
457 width: 32px;
458 border-radius: 40px / 60px;
459 border: 4px solid #000;
460 cursor: ns-resize;
461
462 -webkit-box-shadow: inset 0px 0px 3px 1px hsla(0,0%,0%,.6),
463 inset 0px 6px 1px -2px hsla(0,0%,100%,.30),
464 inset 0px -7px 1px -1px hsla(0,0%,0%,.5);
465
466 background-color: hsl(0,0%,20%);
467 background-image:
468
469 -webkit-radial-gradient( 50% 5%, contain, hsla(0,0%,100%,.2) 0%, hsla(0,0%,0%,0) 70% ),
470 -webkit-radial-gradient( 50% 86%, contain, hsla(0,0%,100%,.05) 0%, hsla(0,0%,0%,0) 80% ),
471 -webkit-linear-gradient( -90deg, hsl(0,0%,15%) 0%,
472 hsl(0,0%,18%) 48%,
473 hsl(0,0%,10%) 48%,
474 hsl(0,0%,27%) 52%,
475 hsl(0,0%,20%) 52%,
476 hsl(0,0%,34%) 100% );
477
478 -webkit-transition: border-color .2s ease-in-out;
479 }
480
481
482 /* :active */
483
484 input[type="number"]:active::-webkit-inner-spin-button {
485 border-color: hsla(200,100%,50%,1);
486 -webkit-box-shadow: inset 0px 0px 3px 1px hsla(200,100%,20%,.6),
487 inset 0px 6px 1px -2px hsla(200,100%,70%,.4),
488 inset 0px -7px 1px -1px hsla(200,100%,10%,.5),
489 0px 0px 4px 3px hsla(200,100%,50%,.3);
490
491 -webkit-transition: none;
492 }
493
494
495
496
497 /*
498 * umbrUI radio buttons by @simurai
499 */
500
501
502
503 /* ----------- radio */
504
505 input[type="radio"] {
506 -webkit-appearance:none; /* Remove Safari default */
507 outline: none;
508 width: 68px;
509 height: 80px;
510
511 position: relative;
512 display: inline-block;
513 margin: 3px;
514 border-radius: 6px;
515
516 background-color: #000;
517
518 -webkit-background-clip: padding-box;
519
520 border: 0;
521 border-bottom: 1px solid rgba(255,255,255,0.1);
522
523 -webkit-perspective: 200;
524 }
525
526
527
528 input[type="radio"]:before {
529 content: attr(data-icon);
530
531 font: 22px/22px sans-serif;
532 text-shadow: rgba(255,255,255,0.08) 0 -1px 0;
533 line-height: 40px;
534
535 text-align: center;
536
537 position: absolute;
538 z-index: 10;
539
540 width: 60px;
541 height: 70px;
542
543 margin: 4px;
544 border-radius: 3px;
545
546 background-image: -webkit-gradient( linear, left top, left bottom,
547 from( hsl(0,0%,20%) ), to( hsl(0,0%,15%) )
548 );
549
550 border-top: 1px solid rgba(255,255,255,0.15);
551
552 }
553
554
555 input[type="radio"]:after {
556 content: "";
557 z-index: 12;
558 position: absolute;
559
560 margin: 3px;
561 border-radius: 3px;
562
563 left: 6px;
564 top: 62px;
565 width: 50px;
566 height: 5px;
567
568 -webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 2px, inset rgba(255,255,255,.1) 0 1px 1px;
569
570 }
571
572
573 /* ----------- checked */
574
575
576 input[type="radio"]:active, input[type="radio"]:checked {
577 -webkit-box-shadow: inset #000 4px 0px 4px, inset #000 -4px 0px 4px;
578 background-image: -webkit-gradient(
579 linear, left top, left bottom,
580 color-stop( 0, hsl(0,0%,10%) ),
581 color-stop( 0.14, hsl(0,0%,30%) ),
582 color-stop( 0.15, hsl(0,0%,0%) )
583 );
584
585 }
586
587
588
589 input[type="radio"]:active:before, input[type="radio"]:checked:before {
590 background-image: -webkit-gradient( linear, left top, left bottom,
591 from( hsl(0,0%,19%) ), to( hsl(0,0%,12%) )
592 );
593
594 z-index: 11;
595
596 border: 0;
597 border-top: 1px solid transparent;
598 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%,
599 color-stop(0, hsla(200,100%,85%,.05)),
600 color-stop(.5, hsl(200,0%,40%)),
601 color-stop(1, hsla(200,100%,80%,.05))
602 )50% 100%;
603 -webkit-box-shadow: 0px 2px 1px 1px hsl(0,0%,13%);
604 -webkit-transform: rotateX(-25deg) scaleX(.95) translateY(4px);
605 }
606
607 input[type="radio"]:checked:before {
608 color: hsl(200,100%,50%);
609 text-shadow: rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;
610 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%,
611 color-stop(0, hsla(200,100%,85%,.05)),
612 color-stop(.5, hsl(200,20%,50%)),
613 color-stop(1, hsla(200,100%,80%,.05))
614 )50% 100%;
615 }
616
617 input[type="radio"]:active:after, input[type="radio"]:checked:after {
618 top: 59px;
619 -webkit-transform: scale(.9);
620 opacity: .4;
621 }
622
623
624 /* ----------- hover */
625
626 input[type="radio"]:hover {
627 cursor: pointer;
628 }
629 input[type="radio"]:checked {
630 cursor: default;
631 }
632 input[type="radio"]:hover:before {
633 background-image: -webkit-gradient( linear, left top, left bottom,
634 from( hsl(0,0%,19.5%) ), to( hsl(0,0%,14%) )
635 );
636 }
637 input[type="radio"]:checked:hover:before {
638 background-image: -webkit-gradient( linear, left top, left bottom,
639 from( hsl(0,0%,19%) ), to( hsl(0,0%,12%) )
640 );
641 }
642 /*
643 * umbrUI progress input by @simurai
644 */
645 /* -------------- progress -------------- */
646 progress {
647 -webkit-appearance: none;
648 position: relative;
649 width: 150px;
650 height: 17px;
651 border-radius: 5px;
652 padding: 4px;
653 background: #000;
654 -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1);
655
656 /*Disabled for now.
657 -webkit-box-reflect: below -3px -webkit-radial-gradient( 50% 70%, 50% 25%, hsla(0,0%,0%,.2) 0%, hsla(0,0%,0%,0) 95% );*/
658 }
659 progress::-webkit-progress-bar {
660 background-color: hsl(200,10%,14%);
661 background-size: 2px 5px;
662 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ),
663 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px );
664 }
665 progress::-webkit-progress-value {
666 background-size: inherit;
667 background-image: inherit;
668 background-color: hsl(200,100%,50%);
669 -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4);
670 -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1);
671 }
672 progress:hover::-webkit-progress-value {
673 /*In the real world, just change the element's value, this is just a hack for this demo.*/
674 width: 100% !important;
675 -webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1);
676 }
677 </style>
678 <script>
679 var rel = "stylesheet";
680 function toggleUmbrUI() {
681 if (rel == "stylesheet") {
682 rel = ""
683 } else {
684 rel = "stylesheet"
685 }
686 var allsuspects = document.getElementsByClassName('umbrui');
687 for (var i = allsuspects.length; i > 0; i--) {
688 //console.log(allsuspects[i]);
689 console.log(allsuspects[i - 1].href);
690 allsuspects[i - 1].rel = rel;
691 }
692 }
693 //toggleUmbrUI();
694 </script>
695 </head>
696 <body>
697 <div>请使用支持CSS3的浏览器查看本页。<a href="http://keleyi.com/a/bjac/3t0molka.htm" target="_blank">原文</a></div>
698 <ul>
699 <!-- meter -->
700 <li>
701 <meter value="0.3"></meter>
702 <meter value="0.2"></meter>
703 <meter value="0.16"></meter>
704 <meter value="0.2"></meter>
705 <meter value="0.3"></meter>
706 </li>
707 <!-- range -->
708 <li>
709 <input type="range" />
710 </li>
711 <!-- checkbox -->
712 <li>
713 <input type="checkbox" data-icon1="♀" data-icon2="♂" />
714 </li>
715 <!-- number -->
716 <li>
717 <input type="number" min="1" max="99" value="78" />
718 </li>
719 <!-- radio -->
720 <li>
721 <input type="radio" name="radio" data-icon="❮❮" /><input type="radio" name="radio" data-icon="►" /><input type="radio" name="radio" data-icon="❯❯" />
722 </li>
723 <!-- progress -->
724 <li>
725 <progress value="0.3"></progress>
726 </li>
727 </ul>
728 <aside>
729 <button onclick="toggleUmbrUI()">柯乐义 CSS3特效</button>
730 </aside>
731 </body>
732 </html>
roucheng
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
