使用css3做立體效果!

話不多說,大家直接保存代碼運行就會有效果!(注:可能問題描述不是很清晰,望大家多多理解)

  1. <style> 
  2. a.button{display:block; outline:none; float:left; padding:0 15px; height:30px; line-height:30px; text-decoration: none; cursor:pointer; border:1px solid #C5C5C5; -moz-border-radius:2px; -khtml-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow:2px 2px 2px #EFEFEF; -moz-box-shadow:2px 2px 2px #EFEFEF; box-shadow:2px 2px 2px #EFEFEF; font-size:12px; color:#666; font-weight:normal; text-align:center; -moz-user-select:none; font-family:"Microsoft YaHei"; text-shadow:1px 1px 0px #FFFFFF; background:url(data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAZAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQICAgICAgICAgICAwMDAwMDAwMDAwEBAQEBAQECAQECAgIBAgIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMD/8AAEQgAPAAFAwERAAIRAQMRAf/EAGYAAQEBAQAAAAAAAAAAAAAAAAYFBAoBAQEAAAAAAAAAAAAAAAAAAAABEAAAAwYDCQAAAAAAAAAAAAAAARHwMVFhkRQhoRNBgdEjBFSkBRURAQADAQAAAAAAAAAAAAAAAAARIUGx/9oADAMBAAIRAxEAPwDvsuSjtjKoAxezzMDgheG5dzYgMnxfc9p5HSq9X67wDzWKJVmlBMgtGuZmxClC17PjRIiCBzWZHZAr/9k=) repeat-x left top;} 
  3. a.button:hover{background-position:left bottom; border-color:#A7A7A7;} 
  4. a.button:active{-webkit-box-shadow:5px 5px 3px #CCCCCC; -moz-box-shadow:5px 5px 3px #CCCCCC; box-shadow:1px 1px 3px #CECECE inset;} 
  5. a.button:disabled{color:#CCC; } 
  6. </style> 
  7.  
  8. <a class="button" href="javascript:;">Button1</a> 
  9.  
  10. <a style="margin-left:20px;" href="javascript:;" class="button" disabled="true">Button 2</a> 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章