CSS3 Demo_{By Adam(http://adamlu.com/)}

1. Selector

   伪类选择器 .selector-1 :nth-child(2n){ background: red; }

   Hi, I'm Adam Lu.

   Hi, I'm Adam Lu.

   Hi, I'm Adam Lu.

   Hi, I'm Adam Lu.

   Hi, I'm Adam Lu.

   伪类选择器 .selector-2 :checked{ margin-left: 100px; }

2. Border Radius

   -moz-border-radius: 5px;-webkit-border-radius: 5px

3. Box Shadow

   -moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888

4. Text Shadow

   text-shadow: 2px 2px 1px #f24

5. @font-face

   Hi, I'm Adam Lu. http://adamlu.com

6. Word Wrap

   This paragraph has a long word thisisaveryverylongwordthatisntreallyoneword
   This paragraph has a long word thisisaveryverylongwordthatisntreallyoneword

7. Border Image

   border: 1em; -moz-border-image: url(border.png) 27 27 27 27 round round;-webkit-border-image: url(border.png) 27 27 27 27 round round;
   border: 1em; -moz-border-image: url(border.png) 27 27 27 27 stretch stretch;-webkit-border-image: url(border.png) 27 27 27 27 stretch stretch;

8. Background Size/Origin/Clip

   background-image: url(banner.jpg); -webkit-background-size: 100% 100%; -webkit-background-origin: padding-box;

9. RGBA&OPACITY

   background: rgba(255, 255, 255, 0.1);
   background: rgb(255, 0, 0); opacity: 0.3;
   您的浏览器是否支持RGBA?

10. Resize

    resize:both;overflow:auto; Hi, I'm Adam Lu. Hi, I'm Adam Lu. Hi, I'm Adam Lu.

11. Outline

    outline-offset: 10px; outline: 2px solid blue;

12. Transform

    -moz-transform: rotate(30deg);-webkit-transform: rotate(30deg);
    -moz-transform: scale(0.5, 2.0);-webkit-transform: scale(0.5, 2.0);
    -moz-transform: skew(-30deg);-webkit-transform: skew(-30deg);
    -moz-transform: translate(30px, 0);-webkit-transform: translate(30px, 0);

13. Transition

    -webkit-transition: all 1s ease-out

14. Animation

    -webkit-animation: greenPulse infinite ease-in-out 3s;