用於WebKit的CSS訣竅-圖片版

來源:互聯網
上載者:User
原文來自於這:

http://www.qianduan.net/webkitu002639s-css-know-how-for.html

只是把圖片還原了一下:

<!DOCTYPE HTML><br /><html><br /><head><br /><meta charset="UTF-8" /><br /><title>用於WebKit的CSS訣竅</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 1s ease-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:#dddddd;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.5s ease-in;}<br /></style><br /></head><br /><body><br /><img class="a" src="http://i5.vanclimg.com/users/18/20120814/focus_tz_120815.jpg" alt="" /><br /><img class="b" src="http://i5.vanclimg.com/users/18/20120810/focus_xb_120810.jpg" alt="" /><br /><div class="img_wrap"><br /><img class="c" style="position:absolute;" src="http://i5.vanclimg.com/users/18/20120810/focus_xb_120810.jpg" alt="" /><br /><img class="d" src="http://i2.vanclimg.com/users/18/20120809/focus_nz_120809.jpg" alt="" /><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 /></div><br /><input type="range" style="-webkit-appearance:slider-horizontal;" /><br/><br/><br /><button style="-webkit-appearance:button;width:200px;height:30px;">gradient button</button><br/><br/><br /><button style="-webkit-appearance:push-button;width:200px;">aqua button</button><br/><br/><br /><input type="text" style="-webkit-appearance:searchfield;" value="kitten" /></input><br/><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 /></html><br />

運行代碼

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.