1、當鼠標放到圖片上，圖片會旋轉一定的角度，i{background:?url(../images/lobg.png)?no-repeat;?width:30px;?height:30px;} i:hover{background-position:? 0?-30px;?transition:?all?.4s?ease-out;}2、鼠標放在圓形圖片中，圖片漸漸的變方形img{border-radius:50%;transition:? all?.4s?ease-out；} a:hover? img{border-radius:0px；}3、長字拆分換行p? {word-wrap:break-word;}允許對長單詞進行拆分，并換行到下一行：4、改變背景圖大小background-size:63px? 100px;?改變背景圖片大小 background-size:40%? 100%;對背景圖片進行拉伸，使其完成填充內容區(qū)域： background-origin:content-box;背景圖片可以放置于? content-box、padding-box?或?border-box?區(qū)域。5、邊框陰影text-shadow:? 5px?5px?5px?#FF0000;您能夠規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色： 6、當鼠標放到菜單或者圖片上時，菜單或圖片會漸漸的移動? a{transition:all? 0.3s?ease-out?0s;color:#000;}?a:hover{margin-left:5px;? text-decoration:none;}7、自定義字體的使用（IE9+）<style>? @font-face { font-family:? myFirstFont; src:? url('Sansation_Light.ttf'), ?? ???url('Sansation_Light.eot');?/*?IE9+?*/ } div { font-family:myFirstFont; } </style>8、圓角邊框border-radius:2px;box-shadow:? 10px?10px?5px?#888888;border-image:url(border.png)? 30?30?round;-moz-border-radius:25px;? /*?舊版?Firefox?*/來自w3cfuns.com