css3增加用photoshop处置图片的繁琐-CSS教程-爱易网页

css3增加用photoshop处置图片的繁琐

日期：2013-05-04　浏览次数：21273 次

这篇文章其实没有什么特别之处，只是为了让大家在做页面设计的时候灵活使用css3的新特性，转变我们以前在前端设计中的做法，我们以一个按钮为例，来说明CSS3可减少我们设计在用photoshop处理图片，使设计与制造理加规范。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>前端设计</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> </head> <body> <div > <a href="http://www.webskys.com" target="_blank">前端设计</a> </div> </body> </html>

怎样样，神奇吧，总之学习css3就得忘记忘记以前我们的无赖办法，遇见什么情况先想想用CSS3能否实现，如果不能，那我们再用以前的办法，只要这样才能更好、更快的学好CSS3。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

css3增加用photoshop处置图片的繁琐

相关资料更多>

推荐阅读更多>