一个input标签搞定含内外描边及阴影的按钮～

自从怀孕以来，我就变得很是轻松，偶尔写一两个页面，或者偶尔调试一个两个bug，或者偶尔给做JS的同事打打下手，修改个bug什么......一个习惯于忙碌的工作的人，这一闲下来，感觉还真TM很不舒服～怎么办，自己打发时间呗，闲来无事看看别人的技术博客，趁这段时间长长自己的见识，充充电；可实在不想看了、烦了，怎么办？偶然间看到一个同事写的一个按钮了，因为一个边的浅色内描边所以，用了两个div写了一个按钮；之前的处理都是直接把那1px的描边直接忽略，或者找设计重新调整，因为感觉一个按钮用两个标签有点浪费。费话不多说，先上按钮图片：

这个是效果图，看到上面的那个细微的浅色内描边了么？

同事的实现方法是这样的，HTML代码如下：

<div class="outBtn">
    <div class="innerBtn">测试按钮</div>
</div>

CSS代码如下：

.outBtn{border: 1px solid #f47a0e;border-radius:2px;-webkit-border-radius: 2px;height: 38px;box-shadow:0 1px 3px #bebdbd;-webkit-box-shadow: 0 1px 3px #bebdbd;}
.innerBtn{border-top: 1px solid #ffa033;background: #ff8700;text-align: center;height: 37px;line-height: 37px;color: #fff;}

上实现效果：

只是一个按钮而已，我总觉得写这么多代码有浪费，而且都没有用input标签，也就是说HTML代码没有语义化。

所以我就在想怎么样能直接用一个input标签把它实现了呢；正好昨天刚看了张鑫旭同学的一个篇文章叫《CSS3 box-shadow盒阴影图形生成技术》，有兴趣的朋友可以看看，张鑫旭的文章写的倍儿有意思。言归正转啊，这篇文章中提到了像素的叠加，于是我就想利用阴影的叠加是不是可以只用一个input标签把这个效果实现了。

开始我想用border写上边那一条浅色的线，外边框用box-shadow实现，再叠加上下面的灰色阴影，结果不甚理想。

换个思路，边框还用border实现，里面那条浅色线及下面的灰色阴影用box-shadow叠加，于是就出现的我想要效果，看下效果，有没有什么出入：

效果还不错吧～～

上代码：

<input type="button" value="演示按钮" class="btn"  />
<style>
.btn{200px;display:block;height:38px;line-height;38px;text-align:center;background:#FF8700;border:1px solid #f47a0e;-webkit-border-radius: 2px;outline:none;color:#fff;box-shadow:0 1px #ffa033 inset, 0px 1px 3px #bebdbd;}
</style>

这个CSS的世界也是五彩缤纷滴，林子大了，什么漂亮的鸟都有，找找看，或许会有意想不到的鸟儿哦～～