Http://www.qianduan.net/webkitu002639s-css-know-how-for.html
I just restored the image:
<! Doctype HTML> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <title> for WebKit CSS tips </title> <br/> <style type = "text/CSS"> <br/> * {margin: 0; padding: 0 ;}< br/> body {Font: 12px/2 Arial; Background: # fff ;}< br/> IMG {display: block ;} <br/>. A {-WebKit-transform: Rotate (5deg);-WebKit-box-Shadow: 10px 10px 5px #888 ;}< br/>. B {-WebKit-transform: Scale (0.8) ;}< br/>. b: hover {-WebKit-transform: Scale (1) ;}< br/>. img_wrap IMG {-WebKit-transform: opacity 1 s memory-in-out;} <br/>. C ,. img_wrap: hover. d {opacity: 1.0 ;}< br/>. img_wrap: hover. C ,. d {opacity: 0 ;}< br/>. col {-WebKit-column-count: 3;-WebKit-column-gap: 25px;-moz-column-count: 3;-moz-column-gap: 25px ;} <br/>. col P {Height: 300px ;}< br/> # boxes Div {border: 2px solid black; padding: 10px; margin: 5px; width: 200px; text-align: center; background: # Eee ;}< br/> # box1 {z-index: 100; position: absolute; top: 5px; left: 5px; width: 100px; Height: 250px; padding: 5px;-WebKit-border-radius: 10px; Border: 2px solid black; Background: # dddddddd; Z-index: 200 ;} <br/> # Slider {z-index: 100; position: absolute; top: 30px; left: 5px; Height: 200px; width: 90px; padding-top: 10px; padding-left: 15px;-WebKit-border-radius: 10px; Border: 1px solid black; Background: # eeeeee;-WebKit-transition: -WebKit-transform 0.5 s extract-in ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <br/> <br/> <Div class = "img_wrap"> <br/> <br/> <br/> </ div> <br/> <Div class = "col"> <br/> <p> column A </P> <br/> <p> Column B </P> <br/> <p> column C </P> <br/> </div> <br/> <Div id = "Boxes"> <br/> <Div Style = "-WebKit-border-radius: 15px; "> <br/> all sides <br/> </div> <br/> <Div style ="-WebKit-border-bottom-left-radius: 15px; -WebKit-border-top-right-radius: 15px; "> <br/> opposite corners <br/> </div> <br/> <Div style ="-WebKit-border-top-left-radius: 15px; -WebKit-border-top-right-radius: 15px; "> <br/> top <br/> </div> <br/> <Div style ="-WebKit-border-top-right-radius: 15px; -WebKit-border-bottom-right-radius: 15px; "> <br/> side <br/> </div> <br/> <input type =" range "style ="-WebKit- appearance: slider-horizontal; "/> <br/> <button style ="-WebKit-appearance: button; width: 200px; Height: 30px; "> gradient button </button> <br/> <button style ="-WebKit-appearance: push-button; width: 200px; "> aqua button </button> <br/> <input type =" text "style ="-WebKit-appearance: searchfield; "value =" kitten "/> </input> <br/> <Div id =" Slider "> <br/> slider <br/> content <br /> </div> <br/> <Div id = "box1"> <br/> <a href = "javascript: popout (); "> popout </a> <br/> </div> <br/> </body> <br/> </ptml> <br/>
RUN Code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
