自從懷孕以來，我就變得很是輕松，偶爾寫一兩個頁面，或者偶爾調試一個兩個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{width: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的世界也是五彩繽紛滴，林子大了，什么漂亮的鳥都有，找找看，或許會有意想不到的鳥兒哦～
～