一個按鈕引起的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))這個參數組合你能夠直接用的，就是一個遮罩的用處。     終於介紹完了，及官方又長篇，勿噴啊，若是看不爽，那我建議你，親自寫寫，你會明白的更快吧