收藏本站投递资讯前端导航

前端资讯

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 1350|回复: 2

巧用CSSS3实现元素翻转

[复制链接]
发表于 2012-10-21 16:30:36 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans itional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.   <style type="text/css">
  6. a.four
  7.         {
  8.             display: block;
  9.             width: 6.6em;
  10.             height: 1.4em;
  11.             line-height: 1.4;
  12.             text-align: center;
  13.             text-decoration: none;
  14.             font-weight: 600;
  15.             border: 1px solid #66a300;
  16.             -moz-border-radius: 6px;         //在Firefox下实现圆角框
  17.             -webkit-border-radius: 6px;    //Safari下实现圆角框
  18.             border-radius: 6px;
  19.             background-image: -webkit-gradient(linear, left top, left bottom, from(#abe142), to(#67a400));
  20.             background-color: #8cca12;
  21.             color: #fff;
  22.             text-shadow: 2px 2px 2px #66a300;    //投影
  23.             -moz-box-shadow: 2px 2px 2px #ccc;
  24.             -webkit-box-shadow: 2px 2px 2px #ccc;
  25.             box-shadow: 2px 2px 2px #ccc;
  26.             -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.52, transparent), to(white));   //倒影
  27.         }
  28.         a.four:hover
  29.         {
  30.             background-color: #f7a300;
  31.             text-shadow: 2px 2px 2px #ff7400;
  32.             border-color: #ff7400;
  33.             background-image: -webkit-gradient(linear, left top, left bottom, from(#f7a300), to(#ff7400));
  34.         }
  35.         
  36.         a.four:active
  37.         {
  38.             background-color: #a7a7a7;
  39.             text-shadow: 2px 2px 2px #868686;
  40.             border-color: #868686;
  41.             background-image: -webkit-gradient(linear, left top, left bottom, from(#a7a7a7), to(#868686));
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46. <div><a href="#" class="four">book</a></div>
  47. </body>
  48. </html>
复制代码
css3包含text-shadow,box-shadow,border-radius等属性,可以创建样式很丰富的按钮,而不需要任何图像。
回复

使用道具 举报

wgsgtg92 该用户已被删除
发表于 2013-4-22 15:10:55 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则