一个按钮引起的css3知识

还在用死板的图片作按钮的背景吗，我以前就这么用，但如今不了，也没那么绝对，假如你的老板，非让你把ie6的问题都解决完，那你有两种方法，一继续用图片，二辞职走人，追逐刺激的新技术吧！哦，好像在国外，有一种玩意css3他不叫新技术，人家玩的差很少了。

    看看下边的这个按钮，话说，纯css打造，固然，我不敢直面淋漓的ie浏览器，你也算了，来看看火狐，谷歌，以及移动端的表现吧

  
  

   看css代码,前后运用了空城计，反间计，糊里糊涂砸车计，唉？等等，好熟悉的台词，彻底不在一个世界啊，赶忙回来-------前后应用了 圆角border-radius、 投影box-shadow、 文本投影text-shadow、 背景渐变linear-gradient、 倒影-webkit-box-reflect

 

     

.button1{
       color:#444;
       text-decoration:none;
       font-size:22px;
       font-weight:bold;
       font-family:Verdana, Geneva, sans-serif;
       text-transform:uppercase;
       display:inline-block;
       text-align:center;
       background-color:#ccc;
       width:235px;
       height:70px;
       line-height:70px;
       border:2px solid #444;
       -webkit-border-radius:15px;
       -moz-border-radius:15px;
       border-radius:15px;
       -webkit-box-shadow:0px 3px 2px #ccc;
       -moz-box-shadow:0px 3px 2px #ccc;
       box-shadow:0px 3px 2px #ccc;
       box-shadow:0 0 3px 1px rgba(255, 255, 255, 0.36) inset;
       text-shadow:0px 1px 1px #fff;
       background-image:-moz-linear-gradient(center top , #ddd 0%, #D4D4D4 50%, #C5C5C5 50%, #ADADAD 100%);
       background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(0.5, #D4D4D4), color-stop(0.5, #C5C5C5), color-stop(1, #ADADAD));
       -moz-box-reflect:below 0 -moz-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3));
       -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3));}

 

   圆角border-radius

   border-radius:length|%
   这是一个缩写，至关于四个角设置一样的值，用px或者百分比均可以，想要成为圆形，就用50%，你也能够单独设置每一个角，语法和设置边框有的一拼，例如border-radius:5px 2px 4px 1px，分别是左上、右上、右下、左下，你恍然大悟，不就是顺时针吗，哦，是这样的，也能够啰嗦的分开写，border-top-left-radius:5px;太罗嗦，我就不细讲这个分开写了，兼容IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持。。。还有为了兼容老版本的火狐啊，谷歌啊等等，你能够加前缀，火狐-moz、谷歌/苹果-webkit、Opera -o、ie -ms。注意样式顺序最好是私有样式而后标准样式.

 

   投影 box-shadow
    box-shadow： h-shadow v-shadow blur spread color inset
    好多的参数啊，依次说下， h-shadow水平阴影（必需） v-shadow垂直阴影（必需） blur模糊距离（可选） spread的尺寸（可选） color阴影颜色（可选） inset内部阴影，这些属性值本身试了才记得快些，就不细说了，最后要提的是inset，加上就是内阴影，不加就是外阴影。

    文本投影text-shadow
    text-shadow: h-shadow v-shadow blur color
    h-shadow水平阴影（必需） v-shadow垂直阴影（必需） blur 模糊距离（可选） color 阴影颜色（可选）看起来和box投影一个意思，也没啥可讲的，相信你能够触类旁通。

    背景渐变gradient
    gradient更确切的是属性值，因为火狐和谷歌写法不一样，因此分开来讲，规定按钮的背景，那就是background-image : -moz-linear-gradient(center top , #ddd 0%, #D4D4D4 50%, #C5C5C5 50%, #ADADAD 100%); linear-gradient 是线性渐变，radial-gradient是径向渐变，咱们这里的按钮时用线性的，top是从上到下、left是从左到右，若是定义成left top，那就是从左上角到右下角,我写了个center，能够去掉， #ddd 0%这个是起始颜色的意思， #ADADAD 100%结束颜色，中间能够按本身的需求添加各类百分比位置的颜色，我那个50%是指中间部位，第一个50%是前半程的结束颜色，第二个50%是后半程的起始颜色
    再看下webkit内核的写法， background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(0.5, #D4D4D4), color-stop(0.5, #C5C5C5), color-stop(1, #ADADAD));linear线性渐变写到了括号里边，而后是一对起始坐标，一对结束坐标，能够用具体数字也能够用关键位置，我用的关键位置表明左上到左下，你得脑海里是否是出现了一条竖着的直线，对了，在日后边的参数看 color-stop (0, #ddd)写颜色要用 color-stop这个呀，0就是起始，后边是对应的颜色，1表明结束颜色，中间参数能够用0到1之间的小数表示，说了好多呀，求你本身必定要试一试，才能把握好这些看似不少的参数，转下一个样式。

     倒影-webkit-box-reflect
     -webkit-box-reflect：direction | offset | mask-box-image
     你眼睛尖不尖，发现我直接就是-webkit了吗，是呀，这个样式目前只有weibkit内核的浏览器支持，可是好玩的东西，就要玩起来 呀，direction的参数有above：倒影在对象的上边、below：下边、left：左边、right：右边，offset倒影与对象之间的间 隔，能够用像素单位，能够用百分比，能够为负数；懂ps的知道倒影须要遮罩层，mask-box-image就是遮罩层，其可用的参数是；none：无遮 罩图像、url：引用图像做为遮罩、linear-gradient：使用线性渐变建立遮罩图像、radial-gradient：使用径向(放射性)渐 变建立遮罩图像、repeating-linear-gradient：使用重复的线性渐变建立背遮罩像、repeating-radial- gradient：使用重复的径向(放射性)渐变建立遮罩图像，咱不复杂，就用线性渐变就够了， -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.3))这个参数组合你能够直接用的，就是一个遮罩的用处。     终于介绍完了，及官方又长篇，勿喷啊，若是看不爽，那我建议你，亲自写写，你会明白的更快吧