This article is actually nothing special, just to make the page design when the flexibility to apply the new features of CSS3, change our previous practice in the front-end design, we take a button as an example, to explain that CSS3 can reduce our design in Photoshop processing pictures, Make the design and production of the specification.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> front-end design </title> <style type=" Text/css "> body {margin:200px Auto;} A {width: 130px; height:130px; Margin:auto; Outline:none; Display:block; Text-indent: -10000px; -webkit-box-shadow:0 0 8px 1px rgba (0,0,0,.2); -webkit-border-radius:90px; -moz-box-shadow:0 0 8px 1px rgba (0,0,0,.2); -moz-border-radius:90px; box-shadow:0 0 8px 1px rgba (0,0,0,.2); border-radius:90px; } a:hover {-webkit-box-shadow:0 0 8px 1px rgba (0,0,0,.2), inset 0 0 20px 6px rgba (0,0,0,.1); -moz-box-shadow:0 0 8px 1px rgba (0,0,0,.2), inset 0 0 20px 6px rgba (0,0,0,.1); box-shadow:0 0 8px 1px rgba (0,0,0,.2), inset 0 0 20px 6px rgba (0,0,0,.1); } a:active {-webkit-box-shadow:0 0 8px 1px rgba (0,0,0,.2), inset 0 0 20px 6px rgba (0,0,0,. 2); -moz-box-shadow:0 0 8px 1px rgba (0,0,0,.2), inset 0 0 20px 6px rgba (0,0,0,.2); box-shadow:0 0 8px 1px rgba (0,0,0,.2), inset 0 0 20px 6px rgba (0,0,0,.2); </style> </pead> <body> <div > <a href= "http://www.webskys.com" target= "_blank" > Front-End Design </a> </div> </body> </ptml>
How, magic, in short learn CSS3 will have to forget to forget before our rogue method, meet what situation first think to use CSS3 can achieve, if not, then we use the previous method, only in this way to better and faster to learn CSS3.