css3經常使用屬性之表現型

css3的使用已經分佈在各類網站上，其用途對於前端開發人員來講有很大的幫助，好比以前的圓角矩形，須要使用背景圖片來完成，如今只需使用border-radius:5px;即可以作出圓角邊框的效果，今天來記錄下css3一些經常使用的屬性。

本文來源：www.liteng.org如需轉載請註明出處。不然將追究法律責任

版權歸做者和博客園全部，請友情轉載。

盒子屬性：邊框圓角：radius,邊框陰影：box-shadow

邊框：border-radius:top-left top-right bottom-right bottom-left;

這裏先贅述一下盒子邊框樣式設計的前後順序

border-radius:10px;

border-radius:10px;

border-top-left-radius:10px;

border-top-left-radius:10px;

盒子陰影 box-shadow:h-shadow v-shadow blur color inset/outset

box-shadow:5px 5px 5px red;

默認是外陰影outset

box-shadow:5px 5px 5px red;

box-shadow:5px 5px 5px red inset;

box-shadow:5px 5px 5px red inset;

固然能夠設置多個陰影只需在以後面加','。

box-shadow:5px 5px 5px red inset,-5px -5px 5px green;

box-shadow:5px 5px 5px red inset,-5px -5px 5px green;

轉換2D/3D：transform：rotate,scale,skew

瀏覽器的支持：IE10，firfox,opera

爲了達到各個瀏覽器的兼容性.請使用一下方法

-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
transform:rotate(45deg);

目前範圍僅僅在2d，全部先上2d示例

transform:rotate(Xdeg)定義角度旋轉

transform:rotate(0deg)

transform:rotate(45deg)

transform:rotate(45deg)

transform:rotate(Xdeg)定義角度旋轉

實用性那就智者見智了。

transform:scale(x)：縮放參數爲縮放的倍數

 

transform:scale(1.5)

注:指在原基礎的x,y方向縮放

skew() 方法

 

transform:skew(0deg,45deg)

經過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：

---

css3的動畫：animate

animation:myanimation 5s linear infinite

animation:myanimation 5s linear infinite;(指定的幀名，執行的時間間隔，效果，執行次數)

<div style="height: 100px; width: 100px; text-align: center; border: 4px solid rgb(0, 0, 255);animation:myanimation 5s linear infinite;">animation:myanimation 5s linear infinite</div>

<p>
<style type="text/css">@keyframes myanimation{
    0%{
       background-color:red; 
    }
    50%{
       background-color:green; 
    }
    100%{
       transform:rotate(720deg);
       border-radius:50%;
       background-color:gray; 
    }
  }
</style>

本人來源：www.liteng.org如需轉載請註明出處。不然將追究法律責任

版權歸做者和博客園全部，請友情轉載。

動畫執行效果：linear:勻速，ease:勻加速，ease-in：減速開始，ease-out:減速結束 ，ease-in-out:減速開始減速結束。

原文地址：http://liteng.org/node/56

更多效果：url:http://2.liteng.sinaapp.com/HTML5/index.html

下篇將記錄css3選擇器的使用方法